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.


element.insertAdjacentHTML(position, text);


A DOMString representing the position relative to the element; must be one of the following strings:
  • 'beforebegin': Before the element itself.
  • 'afterbegin': Just inside the element, before its first child.
  • 'beforeend': Just inside the element, after its last child.
  • 'afterend': After the element itself.
The string to be parsed as HTML or XML and inserted into the tree.

Visualization of position names

<!-- beforebegin -->
  <!-- afterbegin -->
  <!-- beforeend -->
<!-- afterend -->
Note: The beforebegin and afterend positions work only if the node is in the DOM tree and has a parent element.


// <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>


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 Status Comment
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Working Draft

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Full support 1Edge Full support 17
Full support 17
No support 12 — 17
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Full support 8IE Full support 4
Full support 4
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Full support 8Safari Full support 10WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support 1.0


Full support  
Full support
See implementation notes.
See implementation notes.

See also