Element：insertAdjacentElement() 方法
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.
Element 接口的 insertAdjacentElement() 方法将一个给定的元素节点插入到相对于当前元素的指定位置。
语法
js
insertAdjacentElement(position, element)
返回值
插入的元素，插入失败则返回 null。
异常
SyntaxErrorDOMException-
如果指定的
position不是可识别的值，则抛出该异常。 TypeError-
如果指定的
element不是有效的元素，则抛出该异常。
位置名称的可视化
html
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
备注：
只有当节点处于 DOM 树中且有一个父元素时 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> 元素。点击其中一个 div 时，这个容器会处于选中状态，然后你就可以按下 Insert before 或 Insert after 按钮，通过 insertAdjacentElement() 方法来把一个新的 div 插入到选中的元素前面或者后面。
规范
| Specification |
|---|
| DOM # dom-element-insertadjacentelement |
浏览器兼容性
Loading…
参见
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()（与beforebegin类似，但参数不同）Node.appendChild()（与beforeend效果相同）