insertAdjacentHTML 是一个高效 DOM 插入方法，支持 beforebegin、afterbegin、beforeend、afterend 四种位置，直接解析 HTML 字符串为节点插入，不破坏原结构、不触发重排重绘，且保留事件监听器和用户状态。

insertAdjacentHTML 是一个非常实用的 DOM 方法，它能在不破坏原有结构、不触发重排重绘的前提下，把 HTML 字符串精准插入到目标元素的指定相对位置。

四个可选位置参数：beforebegin、afterbegin、beforeend、afterend

它接收两个参数：第一个是表示插入位置的字符串（必须是以下四个之一），第二个是要插入的 HTML 字符串。

• beforebegin：插入到目标元素自身之前（即目标元素的父元素中，位于目标元素前面）
• afterbegin：插入到目标元素内部开头（即目标元素的第一个子节点之前）
• beforeend：插入到目标元素内部末尾（即目标元素的最后一个子节点之后）
• afterend：插入到目标元素自身之后（即目标元素的父元素中，位于目标元素后面）

对比 innerHTML 和 append/appendChild 的关键优势

不同于 innerHTML += ...（会销毁并重建所有子节点，丢失事件监听器和用户输入状态），也不同于 append()（只接受 Node 或字符串，且字符串会被当作纯文本处理），insertAdjacentHTML 直接解析 HTML 字符串并插入为真实 DOM 节点，同时保留原结构和绑定逻辑。

• 插入的 HTML 中的 <script></script> 标签默认不会执行（安全机制），如需执行需手动调用 eval 或动态创建 script 元素
• 支持插入多个节点（只要 HTML 字符串合法，比如 "
  A
  B
  "）
• 不触发目标元素及其子节点的重新渲染，性能更优

实际使用示例

假设有如下 HTML：

<div id="box">
  <p>第一段</p>
</div>

执行以下操作：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

• document.getElementById('box').insertAdjacentHTML('beforebegin', '

  标题

  '); → 在
  外部上方插入
• document.getElementById('box').insertAdjacentHTML('afterbegin', '开头内容'); → 插入后变为：
  开头内容

  第一段

• document.getElementById('box').insertAdjacentHTML('beforeend', '

  ---

  '); → 在
  后面插入

  ---

• document.getElementById('box').insertAdjacentHTML('afterend', '
  页脚
  '); → 在