如何将contenteditable输入内容存到变量并输出到页面

contenteditable="true"是给普通非表单元素加可编辑能力的属性，这类元素（比如h1、div、p）没有value属性，原代码里用.value取值永远拿不到实际输入的内容，自然没法正常渲染到页面上。

JS部分 #

function saveEdits() {
    // 获取可编辑元素
    const editArea = document.getElementById("myText");
    // 取纯文本内容用innerText，需要保留富文本格式（加粗、换行等）就替换为innerHTML
    const saveContent = editArea.innerText;
    // 将内容写入展示区域
    document.getElementById("update").textContent = saveContent;
}

HTML部分（原有结构无需调整，直接使用即可） #

<h1 id="myText" contenteditable="true">Title</h1>
<input type="button" value="save edits" onclick="saveEdits()"/>
<p id="update"></p>

• 纯文本场景优先用innerText/textContent取值赋值，会自动过滤HTML标签，避免恶意脚本注入风险。
• 如果需要保留编辑时的富文本样式，取值赋值都换成innerHTML即可，生产环境使用建议先对用户输入的内容做XSS安全过滤。

内容的提问来源于stack exchange，提问作者Yiannis