Element.insertAdjacentHTML

  • Revision slug: Web/API/element.insertAdjacentHTML
  • Revision title: element.insertAdjacentHTML
  • Revision id: 447443
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{DomRef()}}

Summary

insertAdjacentHTML() 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 the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation.

Syntax

element.insertAdjacentHTML(position, html);

position is the position relative to the element, and 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.

text is 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 a tree and has an element parent.

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>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("8.0") }} 4.0 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specification

Specification Status Comment
{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}} {{ Spec2('DOM Parsing') }}  

See also

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

Revision Source

<div>
  {{DomRef()}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><code>insertAdjacentHTML()</code> 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 the element. This, and avoiding the extra step of serialization make it much faster than direct <code>innerHTML</code> manipulation.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
<em>element</em>.insertAdjacentHTML(<em>position</em>, <em>html</em>);
</pre>
<p><code>position</code> is the position relative to the <code>element</code>, and must be one of the following strings:</p>
<dl>
  <dt>
    <code>'beforebegin'</code></dt>
  <dd>
    Before the <code>element</code> itself.</dd>
  <dt>
    <code>'afterbegin'</code></dt>
  <dd>
    Just inside the <code>element</code>, before its first child.</dd>
  <dt>
    <code>'beforeend'</code></dt>
  <dd>
    Just inside the <code>element</code>, after its last child.</dd>
  <dt>
    <code>'afterend'</code></dt>
  <dd>
    After the <code>element</code> itself.</dd>
</dl>
<p><code>text</code> is the string to be parsed as HTML or XML and inserted into the tree.</p>
<h3 id="Visualization_of_position_names">Visualization of position names</h3>
<div class="wp_syntax">
  <div class="code">
    <pre class="xml" style="font-family:monospace;">
<span style="color: #808080; font-style: italic;">&lt;!-- beforebegin --&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;
</span></span></span><span style="color: #808080; font-style: italic;">&lt;!-- afterbegin --&gt;</span>
foo
<span style="color: #808080; font-style: italic;">&lt;!--</span> <span style="color: #808080; font-style: italic;">beforeend --&gt;
</span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;
</span></span></span><span style="color: #808080; font-style: italic;">&lt;!-- afterend --&gt;</span>
</pre>
  </div>
</div>
<div class="note">
  <strong>Note:</strong> The <code>beforebegin</code> and <code>afterend</code> positions work only if the node is in a tree and has an element parent.</div>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush: js">
// &lt;div id="one"&gt;one&lt;/div&gt; 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');

// At this point, the new structure is:
// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("8.0") }}</td>
        <td>4.0</td>
        <td>7.0</td>
        <td>4.0 (527)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("8.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td>
      <td>{{ Spec2('DOM Parsing') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<p><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</a></p>
Revert to this revision