返回
创建于
状态
公开

insertAdjacentElement() 是一个非常高效的原生 JavaScript DOM 方法，用于将一个指定的元素节点插入到相对于当前元素的特定位置。

与传统的 appendChild() 或 insertBefore() 相比，它的语法更加直观，因为它通过位置字符串来精确控制插入点。

1. 语法

javascript
1element.insertAdjacentElement(position, elementToInsert);

参数说明

  • position: 一个字符串，定义了相对于 element 的位置。共有 4 个选项：
    • 'beforebegin': 在该元素本身的前面（作为前一个兄弟节点）。
    • 'afterbegin': 在该元素内部的最前面（作为第一个子节点）。
    • 'beforeend': 在该元素内部的最后面（作为最后一个子节点）。
    • 'afterend': 在该元素本身的后面（作为后一个兄弟节点）。
  • elementToInsert: 准备插入的元素对象。

2. 位置图解

html
1<div id="target">
2  <p>现有内容</p>
3  </div>

3. 代码示例

假设我们要在一个容器中动态插入一个按钮：

javascript
1const container = document.querySelector('#container');
2const newBtn = document.createElement('button');
3newBtn.textContent = '我是新来的';
4
5// 1. 插入到容器内部的最开始
6container.insertAdjacentElement('afterbegin', newBtn);
7
8// 2. 插入到容器紧接着的后面（作为兄弟）
9// container.insertAdjacentElement('afterend', newBtn);

4. 为什么使用它？

与其他方法的对比

方法特点
appendChild只能插入到末尾，不够灵活。
insertBefore语法繁琐，需要同时引用父节点和参照子节点。
innerHTML += ...性能差且危险。它会销毁并重建容器内所有的 DOM 节点，导致之前绑定的事件监听器失效。
insertAdjacentElement性能最优。它不会解析 HTML 字符串（那是 insertAdjacentHTML 做的事），而是直接操作内存中的节点对象。

5. 衍生方法家族

除了插入元素对象，还有两个处理字符串和文本的相关方法：

  1. insertAdjacentHTML(pos, htmlString): 插入一段 HTML 字符串（最常用，代替 innerHTML 的利器）。
  2. insertAdjacentText(pos, text): 仅插入纯文本。

避坑指南

  • 如果你尝试插入一个已经在页面上的元素，insertAdjacentElement 会将它从原位置移动到新位置（类似于 appendChild 的行为）。
  • 如果 position 字符串写错了（比如写成 afterEnd 大写），浏览器会抛出语法错误。