innerHTML最快但会清空事件和输入状态；insertAdjacentHTML可精准插入且保留原有状态；动态替换应优先用DOM遍历而非正则；安全插值需用template+cloneNode。
用 innerHTML 最快，但会清空事件和输入状态
直接赋值 innerHTML 是最常用也最容易上手的方式，比如：el.innerHTML = '<p>hello <strong>world</strong></p>'。浏览器会立刻解析字符串、销毁原子节点、重建 DOM 树。
但它代价明确：所有已绑定的事件监听器丢失；<input> 的当前值、<textarea></textarea> 光标位置、<video></video> 播放进度全归零；若内容含用户输入（如评论），未转义就插入可能触发 XSS。
- 适用场景：整块区域完全重绘，且无交互态需要保留（如仪表盘刷新、静态公告栏）
- 不适用场景：表单区域、聊天消息流、编辑器预览区
- 别用
+=追加——它仍会重复解析整个 HTML，性能更差
insertAdjacentHTML 可精准控制插入位置，不破坏周边节点
insertAdjacentHTML 不替换整个内容，只在指定位置插入新 HTML 字符串，例如：el.insertAdjacentHTML('beforeend', '<span class="tag">new</span>')。它支持四个位置参数：'beforebegin'、'afterbegin'、'beforeend'、'afterend'。
关键优势是：不碰已有子节点，原有事件、输入值、滚动位置全部保留。但它依然解析字符串，所以 XSS 风险和 innerHTML 一样存在。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 适合局部追加（如加载更多列表项、插入广告位）
- 不能用于“替换某一个特定子元素”——它只管插入，不管定位匹配
- 若插入内容含
<script></script>标签，不会自动执行（这是规范行为，不是 bug）
要安全替换变量，必须用 <template> + cloneNode(true)
直接拼接字符串做模板（如 innerHTML = `<div>${name}</div>`）是高危操作：变量若含 <script> 或未闭合标签，会截断 DOM；若含 &、 等字符，会破坏结构。
正确做法是把模板写在 <template> 标签里，用 template.content.cloneNode(true) 克隆出干净副本，再遍历文本节点做变量替换：
const tmpl = document.querySelector('#item-tmpl');
const frag = tmpl.content.cloneNode(true);
frag.querySelectorAll('*').forEach(node => {
if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('{{id}}')) {
node.textContent = node.textContent.replace('{{id}}', escapeHtml(data.id));
}
});
el.appendChild(frag);
-
template.content是文档片段，天然不渲染、不执行脚本、不触发请求 - 必须用
cloneNode(true)，不能用innerHTML读取 template 内容——否则会丢<slot>和 SVG 命名空间 - 只在
textContent中替换，绝不碰outerHTML或属性值，避免误改结构
动态替换已有 HTML 片段，优先用 DOM 遍历而非正则
想把页面中所有 <div class="old">...</div> 替成新结构？别用 innerHTML.replace(/<div class="old">[^]*?<\/div>/g, ...) ——HTML 嵌套、换行、属性顺序稍有变化就会失配，还可能误杀注释或 script 内容。
可靠做法是用 document.querySelectorAll() 定位目标节点，逐个替换：
document.querySelectorAll('div.old').forEach(old => {
const New = document.createElement('div');
New.className = 'new';
New.textContent = 'replaced';
old.replaceWith(New);
});
- 支持复杂条件：可结合
old.matches(':has(> .error)')或检查子节点结构 - 保留父级事件委托链——只要父容器监听了事件，新节点也能响应
- 若需异步加载内容再替换，配合
MutationObserver监听新增节点更稳妥
