直接用 innerhtml 更新会丢失事件监听器，因其销毁重建子树；应改用事件委托、replacechildren() 或 template + clonenode(true) 安全插入。
直接用 innerHTML 更新会丢事件监听器
你写 container.innerHTML = newHtml，浏览器确实能立刻渲染新内容，但所有已绑定在子元素上的事件监听器（比如按钮的 click）全没了——因为整个子树被销毁重建了。这不是 bug，是规范行为。
常见错误现象：document.getElementById('save-btn').addEventListener('click', fn) 绑完，再执行一次 innerHTML，点击就失效；或者表格里每行都有删除按钮，刷新后全部失灵。
- 如果必须用
innerHTML，确保事件委托到父容器：比如给container监听click，再用e.target.matches('.delete-btn')判断来源 - 若要保留原生事件绑定，改用
replaceChildren()：它接受节点或字符串，不销毁父节点，也不触发重解析 -
replaceChildren()不支持 IE，但 Chrome 86+、Firefox 78+、Safari 14.1+ 全都可用；旧环境可封装 fallback：container.replaceChildren ? container.replaceChildren(...nodes) : container.innerHTML = htmlStr
用 插入 HTML 片段更安全
服务端返回的 HTML 字符串（比如 <tr><td>xxx</td></tr>）不能直接塞进 tbody，浏览器会自动补 <tbody> 导致结构错乱。正确做法是先过 <code><template></template>。
关键点：<template></template> 的 content 是只读的 DocumentFragment，直接 appendChild(template.content) 会“搬空”它，第二次调用就啥也没有——控制台还不报错，极难排查。
- 必须用
template.content.cloneNode(true)或document.importNode(template.content, true)获取可复用副本 - 插入表格时，目标必须是
tbody，不是整个table；插入弹窗时，确保克隆后处理重复id（比如modal-close），否则document.getElementById只取第一个 -
<template></template>里的<script></script>和<style></style>默认不执行、不生效，别指望它自动加载逻辑或样式
htmldiff.js 不是 contentEditable 的解药
想在富文本编辑器里高亮用户改了哪几行？别碰 htmldiff.js 直接喂给 contentEditable。它输出的是带 <ins></ins>/<del></del> 的字符串，浏览器一解析，格式全乱，光标错位，甚至破坏 iframe 预览区的样式隔离。
根本原因：contentEditable 没有虚拟节点树，没有 key 机制，也不做快照比对。所谓“差异”，全是 JS 库在背后把 HTML 字符串标准化（比如统一属性顺序、补全标签）后再比对的结果。
-
htmldiff.js只适合插入只读预览区，且输入必须是合法 HTML 字符串：来自textarea的内容得先用DOMParser解析再序列化，否则&、会被误转义 - 它不处理
<script></script>或<style></style>内部 diff，整块当文本 token；嵌套过深或含大量注释时性能明显下降，建议输入 ≤50KB - 真要做编辑器级局部更新，得比对数据状态（比如 Markdown AST 或自定义 schema），而不是 DOM 字符串
diffHTML 适合 UI 区域，不适合编辑容器本身
diffHTML 是个完整渲染库，靠虚拟节点树生成 patch，目标是「应用级视图更新」，不是「编辑器内容 diff」。它需要你显式管理状态、定义组件函数、调用 createRoot().render()。
典型适用场景：左侧写代码、右侧实时预览的双栏界面；待办列表、配置表单这类动态 UI 区域——这些地方能保留滚动位置、焦点状态，也无需处理光标选区。
- 别把它塞进
contentEditable容器：它无法接管富文本编辑行为，也无法响应光标移动、撤销重做等交互 - 如果你用 React/Vue，它们的虚拟 DOM 已经在干这事；纯 JS 场景下，
diffHTML的学习成本和 bundle 大小远高于replaceChildren()+ 手动 patch - 性能敏感时注意：
diffHTML每次 render 都走完整 diff 流程，而replaceChildren()只替换节点，开销更低
最易被忽略的点：无论用哪种方案，都要明确「更新边界」——是整个容器、某段 DOM 子树，还是某个数据字段？边界模糊，就会陷入反复重排、事件丢失、XSS 漏洞三连击。动手前先画清楚数据流和 DOM 生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
