Element: insertAdjacentElement() method
The insertAdjacentElement()
method of the
Element
interface inserts a given element node at a given position
relative to the element it is invoked upon.
Syntax
js
insertAdjacentElement(position, element)
Parameters
position
-
A string representing the position relative to the
targetElement
; must match (case-insensitively) one of the following strings:-
'beforebegin'
: Before thetargetElement
itself. -
'afterbegin'
: Just inside thetargetElement
, before its first child. -
'beforeend'
: Just inside thetargetElement
, after its last child. -
'afterend'
: After thetargetElement
itself.
-
element
-
The element to be inserted into the tree.
Return value
The element that was inserted, or null
, if the insertion failed.
Exceptions
SyntaxError
DOMException
- Thrown if the
position
specified is not a recognized value.
- Thrown if the
TypeError
- Thrown if the
element
specified is not a valid element.
- Thrown if the
Visualization of position names
html
<!-- 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.
Examples
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);
});
Have a look at our insertAdjacentElement.html
demo on GitHub (see the source code too.) Here, we have a sequence of <div>
elements inside a
container. When one is clicked, it becomes selected and you can then press the
Insert before and Insert after buttons to insert new divs before or
after the selected element using insertAdjacentElement()
.
Specifications
Specification |
---|
DOM Standard # dom-element-insertadjacentelement |
Browser compatibility
BCD tables only load in the browser
See also
Element.insertAdjacentHTML()
Element.insertAdjacentText()
-
Node.insertBefore()
(similar tobeforebegin
, with different arguments) Node.appendChild()
(same effect asbeforeend
)