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.
TheinsertAdjacentElement() method of theElement interface inserts a given element node at a given positionrelative to the element it is invoked upon.
Syntax
insertAdjacentElement(position, element)Parameters
positionA string representing the position relative to the
targetElement; must match (case-insensitively) one of the followingstrings:'beforebegin': Before thetargetElementitself.'afterbegin': Just inside thetargetElement, before its first child.'beforeend': Just inside thetargetElement, after its last child.'afterend': After thetargetElementitself.
elementThe element to be inserted into the tree.
Return value
The element that was inserted, ornull, if the insertion failed.
Exceptions
SyntaxErrorDOMExceptionThrown if the
positionspecified is not a recognized value.TypeErrorThrown if the
elementspecified is not a valid element.
Visualization of position names
<!-- beforebegin --><p> <!-- afterbegin --> foo <!-- beforeend --></p><!-- afterend -->Note:Thebeforebegin andafterend positions work only if the node is in a tree and has an elementparent.
Examples
Inserting before and after
In this example 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>Insert before</button><button>Insert after</button><button>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 elementfunction selectElement(newSelection) { if (selectedElem !== newSelection) { if (selectedElem) { selectedElem.classList.remove("selected"); } selectedElem = newSelection; newSelection.classList.add("selected"); }}// Add click handlers that select the clicked elementconst 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 elementconst 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 exampleconst resetBtn = document.querySelector(".reset");resetBtn.addEventListener("click", () => window.location.reload(true));Result
Specifications
| Specification |
|---|
| DOM # dom-element-insertadjacentelement |
Browser compatibility
See also
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()(similar tobeforebegin, withdifferent arguments)Node.appendChild()(same effect asbeforeend)