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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

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,