Element.insertAdjacentElement()
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
targetElement.insertAdjacentElement(position, element);
Parameters
position
-
A
DOMString
representing the position relative to thetargetElement
; 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
Exception | Explanation |
---|---|
SyntaxError |
The position specified is not a recognized value. |
TypeError |
The element specified 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.
Example
beforeBtn.addEventListener('click', function() {
var tempDiv = document.createElement('div');
tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement('beforebegin', tempDiv);
}
setListener(tempDiv);
});
afterBtn.addEventListener('click', function() {
var 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
)