Zusammenfassung

insertAdjacentHTML() 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.
Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer innerHTML Manipulation ergibt.

Syntax

element.insertAdjacentHTML(position, text);

position beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:

'beforebegin'
Vor dem element selbst.
'afterbegin'
Innerhalb des element, direkt vor dessen erstem Kind-Objekt. 
'beforeend'
Innerhalb des element, direkt nach dessen letztem Kind-Objekt.
'afterend'
Nach dem element selbst.

text ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.

Verdeutlichung der position Bezeichner

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
Hinweis: Die beforebegin und afterend Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. 

Beispiel

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// Danach sieht die neue Struktur so aus:
// <div id="one">one</div><div id="two">two</div>

Anmerkungen

Sicherheitsaspekte

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

Für das Einfügen reinen Texts sollte statt insertAdjacentHTML besser node.textContent benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.

Spezifikation

Beschreibung Status Kommentar
DOM Parsing and Serialization
Die Definition von 'Element.insertAdjacentHTML()' in dieser Spezifikation.
Arbeitsentwurf  

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
grundsätzlich
unterstützt
1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
grundsätzlich
unterstützt
? 8.0 (8.0) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Oliver_Schafeld
 Zuletzt aktualisiert von: Oliver_Schafeld,