Element: insertAdjacentElement() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Thuộc tính insertAdjacentElement() method of the
Element interface inserts a given element node at a given position
relative to the element it is invoked upon.
Cú pháp
insertAdjacentElement(position, element)
Tham số
position-
Một chuỗi representing the position relative to the
targetElement; must match (case-insensitively) một trong các giá trị sau strings:'beforebegin': Before thetargetElementitself.'afterbegin': Just inside thetargetElement, before its first child.'beforeend': Just inside thetargetElement, after its last child.'afterend': After thetargetElementitself.
element-
The element to be inserted into the tree.
Giá trị trả về
The element that was inserted, or null, if the insertion failed.
Ngoại lệ
SyntaxErrorDOMException-
Thrown if the
positionspecified is not a recognized value. TypeError-
Thrown if the
elementspecified is not a valid element.
Visualization of position names
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Note:
The beforebegin and
afterend positions work only if the node is in a tree and has an element
parent.
Ví dụ
Inserting before and after
Trong ví dụ này we have a row of square boxes. The user can select a box by clicking on it: this gives the box a different border, to show that it is selected.
If a box is selected, and the user presses the "Insert before" or "Insert after" buttons, then the code creates a new box, gives it a random color, and inserts it before or after the selected box.
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
div {
width: 50px;
height: 50px;
margin: 3px;
border: 3px solid black;
display: inline-block;
background-color: red;
}
.selected {
border-color: aqua;
}
JavaScript
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));
Result
Đặc tả kỹ thuật
| Specification |
|---|
| DOM # dom-element-insertadjacentelement |
Trình duyệt hỗ trợ
Xem thêm
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()(similar tobeforebegin, with different arguments)Node.appendChild()(same effect asbeforeend)