insertAdjacentHTML 不是 innerHTML 的平替，而是专为局部、增量、不破坏状态插入设计的原生方法，比 innerHTML += 快2–4倍且保留事件监听器、表单值和滚动位置。
insertAdjacentHTML 不是 innerHTML 的平替，而是专为「局部、增量、不破坏状态」插入设计的原生方法——只要目标元素已挂载、位置参数写对、用户输入已转义，它就能比拼接式 innerHTML += 快 2–4 倍，且不丢事件监听器、不重置表单值、不触发额外回流。
为什么 insertAdjacentHTML 比 innerHTML += 更快
关键在「跳过序列化」：innerHTML += content 实际执行两步：先调用 innerHTML getter 把整个子树转成字符串（序列化），再调用 setter 解析新字符串重建全部子节点（反序列化）。而 insertAdjacentHTML('beforeend', content) 只解析你传入的 content 字符串，生成对应节点后直接插入，原有 DOM 结构、input.value、滚动位置、绑定的事件全保留。
常见误用：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 在循环里反复写
el.innerHTML += '<li>item</li>'→ 每次都重建整个列表 - 用
innerHTML = el.innerHTML + newHtml→ 显式触发两次解析 - 以为
insertAdjacentHTML会自动转义 → 它和innerHTML一样，不处理 XSS
四个 position 参数的实际含义和踩坑点
它们描述的是「相对于调用该方法的元素自身」的位置，不是相对于父容器或文档流：
立即学习“前端免费学习笔记（深入）”；
-
'beforebegin'：插在该元素的前一个兄弟位置（要求元素已有父节点，否则静默失败） -
'afterbegin'：插在该元素第一个子节点之前（即内部最开头，等效于prepend()） -
'beforeend'：插在该元素最后一个子节点之后（即内部最末尾，最常用，等效于append()） -
'afterend'：插在该元素的后一个兄弟位置（同样要求元素已挂载）
容易混淆的点：
- 把
'beforeend'理解成“插在元素外面结尾” → 其实是“插在元素内部结尾”，和el.appendChild(div)行为一致 - 对
<table> 或 <code><tbody> 直接用 <code>'beforeend'插入<tr> → 在旧版 IE 中报错，应包装为 <code><tbody><tr></tr></tbody>或改用insertRow() - 脚本放在
里立即执行document.body.insertAdjacentHTML→document.body为null，报Cannot read property 'insertAdjacentHTML' of null
如何安全插入含用户数据的 HTML 片段
insertAdjacentHTML 不做任何转义，拼接未处理的 userInput 就等于开 XSS 后门。不能这样写：
el.insertAdjacentHTML('beforeend', `<div>${userInput}</div>`);
正确做法分场景：
- 纯文本内容：用
textContent单独设置，比如div.textContent = userInput - 需混合 HTML 结构：提前转义变量，例如用临时元素提取
nodeValue：const escaped = document.createElement('div'); escaped.textContent = userInput; const safeValue = escaped.innerHTML; - 批量插入多个片段：避免循环多次调用
insertAdjacentHTML，可先拼成一个字符串再单次插入；若内容完全可信，也可用DocumentFragment+innerHTML组合
DOM 尚未就绪时调用 insertAdjacentHTML 会失效
如果目标元素还没被浏览器解析进 DOM（比如 document.body 还不存在），insertAdjacentHTML 会静默失败或抛错。这不是方法问题，是时机问题。
可靠初始化方式：
- 监听
DOMContentLoaded事件，它在 HTML 解析完成、DOM 树构建完毕后触发，此时document.body必然可用 - 避免立即执行函数（IIFE）中直接操作
document.body，除非脚本加了defer或放在前 - 插入全局容器（如 toast、modal）时，务必先检查
if (!document.body) return，再执行插入
最易被忽略的是：动态插入的元素不会立刻出现在 querySelectorAll 结果里——insertAdjacentHTML 同步执行，但渲染是异步的；需要读取新节点时，要么用事件委托，要么确保逻辑在插入后触发。
