Javascript innerHTML

innerHTML Text und HTML-Tags direkt wie Text einsetzen und ersetzen

Jedes HTML-Element hat die Eigenschaft innerHTML, die sowohl Inhalt – einfachen Text als auch HTML-Tags – zwischen dem öffnenden und schließenden Tag des Elements lesen und schreiben kann. Nur Elemente ohne öffnendes und schließendes HTML-Tag haben kein innerHTML.

innerHTML liest den Inhalt eines Elements und gibt ihn als String zurück (als Getter) oder schreibt einen String, der durchaus HTML-Tags enthalten kann, zwischen das öffnende und schließende Tag. Wenn innerHTML Tags enthält, wird die Zeichenkette als HTML geparst.

<p id="elem">Alter Text</p>
…

var elem = document.getElementById("elem");
// liest den Inhalt eines Elements
var myText = elem.innerHTML; 
…
// überschreibt den Inhalt eines Elements
elem.innerHTML = "Text mit einem <a href="mylink.html" class="mylink">Link</a>.";

innerHTML setzt zwar einen String, aber wenn der String HTML-Tags enthält, werden die Tags im Dokument als Elemente interpretiert. Der String wird als HTML geparst. Der Link des Strings ist klickbar und die CSS-Klasse myLink wird auf den Link angewendet – das ist der Clou von innerHTML.

Die modernen Browser unterstützen zusätzlich outerHTML, textContent und insertAdjacent.

innerHTML

innerHTML ist bezaubernd intuitiv. Die Anweisung

var myId = document.getElementById('myId').innerHTML;

liefert den vollständigen String zwischen den öffnenden und schließenden Tags des Elements mit der id myId.

innerHTML einfügen
Bezaubernd einfach
document.querySelector('#clear').onclick = function () {
   document.querySelector('#vanish').innerHTML = '';
}

Nahezu genauso einfach funktioniert der Setter mit innerHTML:

document.querySelector('#vanish').innerHTML = 
   '<img src="bird.svg" alt="" width="240" height="71" />' + 
   '<figcaption>Aus dem Hut gezogen</figcaption>';

Nahezu: Sobald Attribute mit inneren Hochkommas ins Spiel kommen, ist die Zeichenkette fehleranfällig.

innerHTML vs. createElement

Eigentlich klingt createElement ja akkurater und sauberer als innerHTML, auf den ersten Blick auch nach einer besseren Performance. Allerdings ist ein mehrfaches Einfügen in das DOM mehrfach aufwändiger als das einfache Einfügen eines Strings. Soll z.B. ein HTML-select-Element in ein Formular eingesetzt werden, müssen die option-Elemente ebenfalls eingehangen werden.

var select = document.createElement("select");
var option = document.createElement("option");
option.innerHTML = "Paris";
option.setAttribute("value","paris");
…

Aufeinanderfolgende createElement und appendChild- oder insertBefore-Anweisungen wirken nicht gerade elegant. Auf der anderen Seite zieht ein langer innerHTML-String mit mehreren Tags Fehler an wie ein Magnet.

var select = "<select name="city"><option value='berlin'>Berlin</option><option value='paris'>Paris</option></select>";
document.getElementById("form").innerHTML = select;

Für solche Aktion hält Javascript das documentFragment bereit, das außerhalb des DOM mit neuen Elementen bestückt und erst dann ins DOM gehangen wird, wenn alle Elemente sozusagen backstage vorbereitet wurden.

I ER HTML