insertAdjacentHTML是 原生 JavaScript DOM 方法，用于在指定元素的不同位置插入 HTML 内容，不会破坏原有元素结构.这是一个非常实用且高效的 DOM 操作方法。

一、核心概念

insertAdjacentHTML() 方法用于将指定的文本解析为 HTML 或 XML，并将生成的节点插入到 DOM 树中的指定位置。

它结合了两个操作的优点：

  1. 像 innerHTML 一样：可以直接写入 HTML 字符串，浏览器会帮你解析。

  2. 像 appendChild 一样精确：可以非常精确地控制插入的位置，而不会像 innerHTML 那样容易覆盖已有的内容。

二、语法

element.insertAdjacentHTML(position, text);


它接受两个参数：

  1. position：一个字符串，表示相对于 element 的位置。必须是以下四个值之一：

    • 'beforebegin'：在 element 本身之前插入（作为前一个兄弟节点）。

    • 'afterbegin'：在 element 的第一个子节点之前插入（作为它的第一个子元素）。

    • 'beforeend'：在 element 的最后一个子节点之后插入（作为它的最后一个子元素）。

    • 'afterend'：在 element 本身之后插入（作为下一个兄弟节点）。

  2. text：一个字符串，会被解析为 HTML 或 XML 并插入到 DOM 中。

示例代码

// 获取目标元素
const container = document.getElementById('container');
// 在元素末尾插入 HTML
container.insertAdjacentHTML('beforeEnd', '新段落');

三、位置详解

假设我们有如下 HTML 结构：

<!-- beforebegin -->
<div id="myDiv">
  <!-- afterbegin -->
  <p>这是一个段落</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

现在，我们针对 #myDiv 这个元素调用 insertAdjacentHTML：

  • position: 'beforebegin'

myDiv.insertAdjacentHTML('beforebegin', '我在Div外面，前面');

结果：<span> 会作为 #myDiv 的上一个兄弟元素被插入。

position: 'afterbegin'

myDiv.insertAdjacentHTML('afterbegin', '我是Div的第一个孩子');

结果：<span> 会作为 #myDiv 的第一个子元素被插入，在 <p> 标签之前。

position: 'beforeend'

myDiv.insertAdjacentHTML('beforeend', '我是Div的最后一个孩子');

结果：<span> 会作为 #myDiv 的最后一个子元素被插入，在 <p> 标签之后。

position: 'afterend'

myDiv.insertAdjacentHTML('afterend', '我在Div外面，后面');

结果：<span> 会作为 #myDiv 的下一个兄弟元素被插入。