Element:insertAdjacentElement() 方法

Element 接口的 insertAdjacentElement() 方法将一个给定的元素节点插入到相对于当前元素的指定位置。

语法

js
insertAdjacentElement(position, element)
position

表示相对于 targetElement 的位置的字符串;必须是以下字符串之一(大小写不敏感):

  • 'beforebegin'targetElement 之前。
  • 'afterbegin'targetElement 内部的第一个子节点之前。
  • 'beforeend'targetElement 内部的最后一个子节点之后。
  • 'afterend'targetElement 之后。
element

要插入到树中的元素。

返回值

插入的元素,插入失败则返回 null

异常

SyntaxError DOMException

如果指定的 position 不是可识别的值,则抛出该异常。

TypeError

如果指定的 element 不是有效的元素,则抛出该异常。

位置名称的可视化

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

备注: 只有当节点处于 DOM 树中且有一个父元素时 beforebeginafterend 才会生效。

示例

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> 元素。点击其中一个 div 时,这个容器会处于选中状态,然后你就可以按下 Insert beforeInsert after 按钮,通过 insertAdjacentElement() 方法来把一个新的 div 插入到选中的元素前面或者后面。

规范

Specification
DOM Standard
# dom-element-insertadjacentelement

浏览器兼容性

BCD tables only load in the browser

参见