最安全高效的方式是优先使用textContent或DOM方法更新文本，避免innerHTML带来的安全隐患与性能问题；需插入富文本时务必先用DOMPurify过滤；批量操作应使用DocumentFragment一次性挂载；监听内容变化推荐MutationObserver而非已弃用的DOMSubtreeModified。
直接改 innerHTML 最快，但不安全；用 textContent 或 DOM 方法更稳妥，尤其涉及用户输入时。
改文本内容：用 textContent 而不是 innerText
innerText 会触发重排、受 CSS 影响（比如 display: none 的元素内容不返回），且在 Firefox 中行为不一致；textContent 是标准、轻量、可预测的选择。
- 纯文本替换：直接赋值
el.textContent = "新内容" - 想保留原有 HTML 结构但只更新文字？别用
innerHTML，先清空再 append 文本节点：el.replaceChildren(document.createTextNode("新内容")) - 如果要插入带格式的富文本，且确认来源可信（如 CMS 后台），才考虑
innerHTML，否则必须先用DOMPurify.sanitize()过滤
批量插入/替换元素：避免反复操作 innerHTML
每次写 innerHTML += ... 都会触发完整解析 + 重建整个子树，性能差，还会丢失已绑定的事件或表单状态。
- 用
DocumentFragment缓存多个新节点，最后一次性挂载：const frag = document.createDocumentFragment();<br>for (const item of data) {<br> const li = document.createElement("li");<br> li.textContent = item;<br> frag.appendChild(li);<br>}<br>listEl.appendChild(frag); - 已有结构只需局部更新？优先用
replaceWith()、before()、after()等现代方法，比删了再建更精准 - 动态列表建议配合
key思维（哪怕不用框架）：给每个项加唯一data-id，更新前先查 DOM 是否已存在，避免重复创建
监听内容变化：别依赖 DOMSubtreeModified
这个旧事件已被弃用，性能极差，且无法区分是 JS 修改还是用户输入。现代方案是：
立即学习“Java免费学习笔记（深入）”；
- 对输入类元素（
input、textarea）用input事件，它覆盖所有修改方式（键盘、粘贴、自动填充） - 需要监控任意元素内容变化？用
MutationObserver，粒度可控：const obs = new MutationObserver(() => console.log("内容变了"));<br>obs.observe(targetEl, { childList: true, subtree: true, characterData: true }); - 注意：不要观察整个
document.body，容易误报；尽量缩小目标范围，并在不需要时调用obs.disconnect()
真正难的不是“怎么改”，而是“改完之后状态是否一致”——比如改了 innerHTML 却忘了重新绑定事件，或者用 textContent 替换了含 input 的片段导致焦点丢失。这些细节不写进代码里，光靠技巧没用。
