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 recognised value. |
TypeError |
The element specified is not a valid element. |
Visualization of position names
<!--beforebegin
--><p>
<!--afterbegin
--> foo <!--beforeend
--></p>
<!--afterend
-->
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()
.
Specification
Specification | Status | Comment |
---|---|---|
DOM The definition of 'insertAdjacentElement()' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
insertAdjacentElement | Chrome Full support 1 | Edge
Full support
18
| Firefox Full support 48 | IE
Full support
8
| Opera Full support 8 | Safari Full support 10 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 48 | Opera Android Full support 10.1 | Safari iOS Full support 10 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
See also
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
Node.appendChild()
(same effect asbeforeend
)