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相同）