Element: insertAdjacentElement() 方法
Element 接口的 insertAdjacentElement() 方法会在被调用的元素相对于其自身的位置插入一个给定的元素节点。
语法
js
insertAdjacentElement(position, element)
参数
返回值
被插入的元素，如果插入失败则为 null。
异常
SyntaxErrorDOMException-
如果指定的
position不是一个被识别的值，则抛出此异常。 TypeError-
如果指定的
element不是一个有效的元素，则抛出此异常。
位置名称的可视化
html
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
注意： beforebegin 和 afterend 位置仅在节点存在于 DOM 树中并且有元素父节点时才有效。
示例
在之前和之后插入
在这个例子中，我们有一行方块。用户可以通过点击来选择一个方块：这会给方块一个不同的边框，以显示其被选中。
如果一个方块被选中，并且用户按下了“插入到前面”或“插入到后面”按钮，那么代码会创建一个新的方块，给它一个随机的颜色，并将其插入到选中的方块的前面或后面。
HTML
html
<p>
Click colored box to select it, then use the first two buttons below to insert
elements before and after your selection.
</p>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<button class="before">Insert before</button>
<button class="after">Insert after</button>
<button class="reset">Reset demo</button>
CSS
css
div {
width: 50px;
height: 50px;
margin: 3px;
border: 3px solid black;
display: inline-block;
background-color: red;
}
.selected {
border-color: aqua;
}
JavaScript
js
let selectedElem;
// Function to select a new element
function selectElement(newSelection) {
if (selectedElem !== newSelection) {
if (selectedElem) {
selectedElem.classList.remove("selected");
}
selectedElem = newSelection;
newSelection.classList.add("selected");
}
}
// Add click handlers that select the clicked element
const initElems = Array.from(document.querySelectorAll("section div"));
for (const initElem of initElems) {
initElem.addEventListener("click", (e) => selectElement(e.target));
}
// Add click handlers to "beforeBtn" and "afterBtn"
// to insert a new element before/after the selected element
const beforeBtn = document.querySelector(".before");
const afterBtn = document.querySelector(".after");
beforeBtn.addEventListener("click", () => insertNewElement("beforebegin"));
afterBtn.addEventListener("click", () => insertNewElement("afterend"));
function insertNewElement(position) {
function random() {
return Math.floor(Math.random() * 255);
}
if (!selectedElem) {
return;
}
const newElement = document.createElement("div");
const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
newElement.style.backgroundColor = randomColor;
newElement.addEventListener("click", (e) => selectElement(e.target));
selectedElem.insertAdjacentElement(position, newElement);
}
// Reset the example
const resetBtn = document.querySelector(".reset");
resetBtn.addEventListener("click", () => window.location.reload(true));
结果
规范
| 规范 |
|---|
| DOM # dom-element-insertadjacentelement |
浏览器兼容性
加载中…
另见
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()（与beforebegin类似，但参数不同）Node.appendChild()（效果与beforeend相同）