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 July 2015.
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
效果相同)