---
title: Element.insertAdjacentHTML()
slug: Web/API/Element/insertAdjacentHTML
tags:
  - .textContent()
  - Geschwindigkeitsvorteil
  - HTML einfügen
  - Méthode
  - Referenz
translation_of: Web/API/Element/insertAdjacentHTML
---
<div>{{APIRef("DOM")}}</div>

<h2 id="Summary" name="Summary">Zusammenfassung</h2>

<p><code>insertAdjacentHTML()</code> interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.<br>
 Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer <code>innerHTML</code> Manipulation ergibt.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>

<p><code>position</code> beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:</p>

<dl>
 <dt><code style="color: red;">'beforebegin'</code></dt>
 <dd>Vor dem <code>element</code> selbst.</dd>
 <dt><code style="color: green;">'afterbegin'</code></dt>
 <dd>Innerhalb des <code>element</code>, direkt <em>vor dessen erstem</em> Kind-Objekt. </dd>
 <dt><code style="color: blue;">'beforeend'</code></dt>
 <dd>Innerhalb des <code>element</code>, direkt <em>nach dessen letztem</em> Kind-Objekt.</dd>
 <dt><code style="color: magenta;">'afterend'</code></dt>
 <dd>Nach dem <code>element</code> selbst.</dd>
</dl>

<p><code>text</code> ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.</p>

<h3 id="Verdeutlichung_der_position_Bezeichner">Verdeutlichung der position Bezeichner</h3>

<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
<code style="font-weight: bold;">&lt;p&gt;</code>
  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
  foo
  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
<code style="font-weight: bold;">&lt;/p&gt;</code>
&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>

<div class="note"><strong>Hinweis: </strong> Die <code>beforebegin</code> und <code>afterend</code> Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. </div>

<h2 id="Example" name="Example">Beispiel</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;');

// Danach sieht die neue Struktur so aus:
// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>

<h2 id="Specification" name="Specification">Anmerkungen</h2>

<h3 id="Sicherheitsaspekte">Sicherheitsaspekte</h3>

<p>Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). </p>

<p>Für das Einfügen reinen Texts sollte statt <code>insertAdjacentHTML</code> besser <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants.">node.textContent</a></code> benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.</p>

<h2 id="Specification" name="Specification">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Beschreibung</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
   <td>{{ Spec2('DOM Parsing') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>grundsätzlich<br>
    unterstützt</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>Merkmal</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>grundsätzlich<br>
    unterstützt</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("8.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{domxref("Element.insertAdjacentElement()")}}</li>
 <li>{{domxref("Element.insertAdjacentText()")}}</li>
 <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org Gastbeitrag</a><span class="external"> von Henri Sivonen mit Testergebnissen, die Geschwindigkeitsvorteile von insertAdjacentHTML in bestimmten Fällen aufzeigen.</span></li>
</ul>