元素：insertAdjacentElement() 方法

insertAdjacentElement() 是 Element 接口的一个方法，它在调用该方法的元素的给定位置插入一个给定的元素节点。

语法

js
insertAdjacentElement(position, element)

参数

位置

一个表示相对于 targetElement 的位置的字符串；必须（不区分大小写）与以下字符串之一匹配

  • 'beforebegin'：在 targetElement 本身之前。
  • 'afterbegin'：在 targetElement 内部，其第一个子节点之前。
  • 'beforeend'：在 targetElement 内部，其最后一个子节点之后。
  • 'afterend'：在 targetElement 本身之后。
元素

要插入到树中的元素。

返回值

插入的元素，或者如果插入失败则返回 null。

异常

SyntaxError DOMException

如果指定的 position 不是一个已识别的值，则抛出此异常。

TypeError

如果指定的 element 不是一个有效的元素，则抛出此异常。

位置名称的可视化

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注意：beforebegin 和 afterend 位置仅在节点位于树中且具有元素父节点时才有效。

示例

js
beforeBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});

请查看我们在 GitHub 上的 insertAdjacentElement.html 演示（也请查看 源代码）。在这里，我们在一个容器内有一系列 <div> 元素。当点击其中一个元素时，它会变成选中状态，然后您可以按下“插入之前”和“插入之后”按钮，使用 insertAdjacentElement() 在选定元素之前或之后插入新的 div。

规范

规范
DOM 标准
# dom-element-insertadjacentelement

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅