insertAdjacentHTML 不是 innerHTML 的平替，而是专为局部、增量、不破坏状态插入设计的原生方法，比 innerHTML += 快2–4倍且保留事件监听器、表单值和滚动位置。

insertAdjacentHTML 不是 innerHTML 的平替，而是专为「局部、增量、不破坏状态」插入设计的原生方法——只要目标元素已挂载、位置参数写对、用户输入已转义，它就能比拼接式 innerHTML += 快 2–4 倍，且不丢事件监听器、不重置表单值、不触发额外回流。

为什么 insertAdjacentHTML 比 innerHTML += 更快

关键在「跳过序列化」：innerHTML += content 实际执行两步：先调用 innerHTML getter 把整个子树转成字符串（序列化），再调用 setter 解析新字符串重建全部子节点（反序列化）。而 insertAdjacentHTML('beforeend', content) 只解析你传入的 content 字符串，生成对应节点后直接插入，原有 DOM 结构、input.value、滚动位置、绑定的事件全保留。

常见误用：

• 在循环里反复写 el.innerHTML += '
• item
' → 每次都重建整个列表
• 用 innerHTML = el.innerHTML + newHtml → 显式触发两次解析
• 以为 insertAdjacentHTML 会自动转义 → 它和 innerHTML 一样，不处理 XSS

四个 position 参数的实际含义和踩坑点

它们描述的是「相对于调用该方法的元素自身」的位置，不是相对于父容器或文档流：

• 'beforebegin'：插在该元素的前一个兄弟位置（要求元素已有父节点，否则静默失败）
• 'afterbegin'：插在该元素第一个子节点之前（即内部最开头，等效于 prepend()）
• 'beforeend'：插在该元素最后一个子节点之后（即内部最末尾，最常用，等效于 append()）
• 'afterend'：插在该元素的后一个兄弟位置（同样要求元素已挂载）

容易混淆的点：

• 把 'beforeend' 理解成“插在元素外面结尾” → 其实是“插在元素内部结尾”，和 el.appendChild(div) 行为一致
• 对 或 直接用 'beforeend' 插入 → 在旧版 IE 中报错，应包装为 或改用 insertRow()
  脚本放在 里立即执行 document.body.insertAdjacentHTML → document.body 为 null，报 Cannot read property 'insertAdjacentHTML' of null

  如何安全插入含用户数据的 HTML 片段

  insertAdjacentHTML 不做任何转义，拼接未处理的 userInput 就等于开 XSS 后门。不能这样写：

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  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 同步执行，但渲染是异步的；需要读取新节点时，要么用事件委托，要么确保逻辑在插入后触发。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！