Element:insertAdjacentElement() 方法
Element
接口的 insertAdjacentElement()
方法将一个给定的元素节点插入到相对于当前元素的指定位置。
语法
返回值
插入的元素,插入失败则返回 null
。
异常
SyntaxError
DOMException
-
如果指定的
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 Standard # dom-element-insertadjacentelement |
浏览器兼容性
BCD tables only load in the browser
参见
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
(与beforebegin
类似,但参数不同)Node.appendChild()
(与beforeend
效果相同)