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 the
targetElement
itself. 'afterbegin'
: Just inside thetargetElement
, before its first child.'beforeend'
: Just inside thetargetElement
, after its last child.'afterend'
: After thetargetElement
itself.
- Before the
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 -->
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 [[../../../../../../../mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement|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 |
---|---|---|
DOMThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
insertAdjacentElement
|
Chrome
Full support 1 |
Edge Full support 17 Full support 17 No support 12 — 17 Notes' This function is implemented in the |
Firefox
Full support 48 |
IE Full support 8 Full support 8 Notes' This function is implemented in the |
Opera
Full support 8 |
Safari
Full support 3 |
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 1 |
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()
(similar tobeforebegin
, with different arguments)Node.appendChild()
(same effect asbeforeend
)
Element.insertAdjacentElement() by Mozilla Contributors is licensed under CC-BY-SA 2.5.