不能用 innerHTML 处理动态插入内容，因其会销毁重建子树导致光标丢失、事件失效、XSS风险；应优先用 template + cloneNode(true) 安全解析，或校验后使用 insertAdjacentHTML。
直接用 innerHTML 解析动态 HTML 内容是高危操作，尤其当内容含用户输入、第三方富文本或模板变量时——它会执行脚本、清空事件、破坏表单状态，且无法安全处理嵌套逻辑。
为什么不能用 innerHTML 处理动态插入内容
浏览器对 innerHTML 赋值会强制销毁并重建整个子树。常见后果包括：input 光标丢失、video 播放进度归零、已绑定的 click 事件失效；若插入字符串含 <script> 或 javascript: 伪协议，还会触发 XSS。
- 错误现象：控制台报
Failed to execute 'insertBefore' on 'Node'，或页面突然弹窗/发包 - 典型场景：CMS 富文本编辑器导出内容、评论区渲染、Markdown 转 HTML 后插入
- 根本原因：浏览器不区分“结构”和“数据”，
innerHTML无过滤、无沙箱、无上下文感知
template + cloneNode(true) 是最稳妥的解析起点
用 <template> 标签预存结构，再通过 cloneNode(true) 安全克隆并遍历文本节点做变量替换，能保留原 DOM 状态、避免重排、隔离执行环境。
- 必须把动态内容写进
<template>的content属性，而非直接塞进innerHTML - 替换变量时只操作
Text节点，跳过Element和Comment节点，防止误改标签属性 - 若需支持
{{ user.name }}类语法，正则匹配要加g和s标志，否则嵌套换行会漏匹配 - 注意：
cloneNode(true)不复制事件监听器，但也不会删掉——这是优点，不是缺陷
insertAdjacentHTML 可用于安全追加，但有前提条件
insertAdjacentHTML 比 innerHTML 更可控，因为它不重写整个父容器，但前提是目标节点已挂载且内容可信。
立即学习“前端免费学习笔记（深入）”；
- 插入前务必检查
document.body是否存在，否则在<head>中执行会报Cannot read property 'insertAdjacentHTML' of null - 只接受四个位置参数：
'beforebegin'、'afterbegin'、'beforeend'、'afterend'；误写成'append'会静默失败 - 若内容来自服务端，插入前应做基础校验：
if (htmlStr.includes('<script') || htmlStr.includes('javascript:')) throw new Error('unsafe') - 它不会自动清理旧事件，反复插入同一区域时，建议用事件委托替代重复绑定
表格等语义化结构插入必须遵守 DOM 规范
向 <table> 动态插入 <tr> 时，目标容器必须是 <tbody>、<thead> 或 <tfoot>，不能是 <table> 自身或任意 <div>。
- 错误写法：
<table><div id="rows"></div></table>—— 浏览器会自动把<div>移出表格，导致后续innerHTML插入无效 - 正确写法：
<table><tbody id="rows"></tbody></table>，然后对#rows调用insertAdjacentHTML('beforeend', '<tr>...</tr>') - 若需批量插入多行，优先用
DocumentFragment，避免每行都触发一次重排
真正难的不是“怎么插”，而是“插之前有没有确认内容来源、DOM 位置、节点类型和事件生命周期”——这三个要素缺一，轻则渲染错乱，重则 XSS 泄密。
