The insertAdjacentHTML()
method of the Element
interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML
manipulation.
Syntax
element.insertAdjacentHTML(position, text);
Parameters
position
- A
DOMString
representing the position relative to theelement
; must be one of the following strings:
'beforebegin'
- Before the
element
itself. 'afterbegin'
: Just inside theelement
, before its first child.'beforeend'
: Just inside theelement
, after its last child.'afterend'
: After theelement
itself.
- Before the
text
- The string to be parsed as HTML or XML and inserted into the tree.
Visualization of position names
<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend -->
Note: The beforebegin
and afterend
positions work only if the node is in the DOM tree and has a parent element.
Example
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
Notes
Security considerations
When inserting HTML into a page by using insertAdjacentHTML()
, be careful not to use user input that hasn't been escaped.
It is not recommended you use insertAdjacentHTML()
when inserting plain text; instead, use the Node.textContent
property or the Element.insertAdjacentText()
method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.
Specification
Specification | Status | Comment |
---|---|---|
DOM Parsing and SerializationThe definition of 'Element.insertAdjacentHTML()' in that specification. | Working Draft |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
insertAdjacentHTML
|
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 8 |
IE Full support 4 Full support 4 Notes' Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a |
Opera
Full support 8 |
Safari
Full support 4 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 8 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 4 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
See also
Element.insertAdjacentElement()
Element.insertAdjacentText()
XMLSerializer
: Construct a DOM representation of XML text- hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.
Element.insertAdjacentHTML() by Mozilla Contributors is licensed under CC-BY-SA 2.5.