语法
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 插入到选中的元素前面或者后面。
规范
| 规范 |
|---|
| DOM # dom-element-insertadjacentelement |
浏览器兼容性
参见
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()（与beforebegin类似，但参数不同）Node.appendChild()（与beforeend效果相同）