JavaScript/DOM/Element/innerHTML

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

Die Eigenschaft Element.innerHTML liest und speichert den Inhalt eines HTML-Elements. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert.

Syntax

const content = element.innerHTML;

  • Der gesamte Inhalt von element wird der Konstanten content zugewiesen.

element.innerHTML = content;

  • Der evtl. vorhandene Inhalt des Elements wird durch den Wert von content ersetzt.


Anwendungsbeispiel

Beispiel ansehen …
function init() {
  document.getElementById('button').addEventListener('click',changeHTMLContent);
}
  
function changeHTMLContent() {
  var neu = "neuer <b>fetter</b> Text";
   document.getElementById('absatz').innerHTML = neu;
}
Das Beispiel enthält einen Textabsatz und einen Button. Beim Anklicken des Buttons wird die Funktion changeHTMLContent() aufgerufen. Diese Funktion weist dem Absatz mit der id="absatz" für die Eigenschaft innerHTML den Wert der zuvor definierten Variablen neu zu. Der Inhalt des Absatzes ändert sich dann dynamisch und berücksichtigt dabei auch die HTML-Formatierung <b>...</b> beim neuen Inhalt des Elements.

Die Eigenschaft innerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem setTimeout() von einigen Sekunden davor.

Sicherheitsrisiken

Wie im Beispiel gesehen, können Sie mit innerHTML neben Text auch HTML-Elemente erzeugen und einfügen. Obwohl ein Einfügen von Script-Bereichen nicht direkt möglich ist,[1], ist es doch besser sich auf das reine Einfügen von Text mittels Node.textContent zu beschränken.

Empfehlung: Wenn Sie mehrere Werte z. B. eines Arrays in einer Zählschleife dynamisch ausgeben wollen, ist das Einfügen eines Textknotens mit der document.createTextNode-Methode eine deutlich schnellere und performantere Alternative.
Die insertAdjacentHTML()-Methode parst das Element, auf das sie angewendet wird, nicht. Dadurch wird der zusätzliche Schritt der Serialisierung vermieden, was sie viel schneller macht als die direkte innerHTML-Manipulation.

unerwünschte Fehlerbehandlung im Browser

Sobald Sie die innerHTML-Eigenschaft eines Elements verändern, wird der von Ihnen veränderte Inhalt sofort vom Javascript-Interpreter an den Teil der Browserengine weitergegeben, der HTML interpretiert. Das bedeutet insbesondere, dass Ihr Quellcode auch durch die Fehlerbehandlung des HTML-Interpreters beeinflusst wird, was zu unvorhergesehenen Effekten führen kann. Ein automatisches Schließen von HTML-Elementen durch den Browser ist ein offensichtliches Beispiel, das zu unerwünschten Ergebnissen führen kann:

Beispiel ansehen …
function Zählen () {
  document.getElementById("Liste").innerHTML = "";

  for (let i = 1; i <= 10; i++) {
    document.getElementById("Liste").innerHTML += "<li>";
    document.getElementById("Liste").innerHTML += i;
    document.getElementById("Liste").innerHTML += "</li>";
  }
}

function Zählen2 () {
  document.getElementById("Liste").innerHTML = "";

  for (let i = 1; i <= 10; i++) {
    document.getElementById("Liste").innerHTML += "<li>" + i + "</li>";
  }
}
Auf den ersten Blick scheint es keinen Unterschied zwischen den Funktionen zu geben. Die beiden Funktionen unterscheiden sich jedoch dadurch, dass der zu ändernde Quellcode in der ersten Variante Stück für Stück zusammengesetzt wird, während der hinzuzufügende Quellcode in der zweiten Variante zuerst zusammengefügt und dann eingesetzt wird. Im ersten Fall sorgt die Fehlerbehandlung des Browsers dafür, dass schon nach dem ersten Einfügen die vermeintlich fehlerhaften (weil nicht geschlossenen) li-Elemente zunächst direkt automatisch geschlossen werden - dadurch landet der Text, der als Inhalt für die li-Elemente gedacht war, hinter den li-Elementen statt darin, denn die li-Elemente wurden zu diesem Zeitpunkt schon durch den Browser geschlossen.
Empfehlung: Achten Sie darauf, dass der veränderte Quelltext, den Sie via innerHTML zuweisen, zu jedem Zeitpunkt für sich selbst vollständig valide ist und dadurch keine unerwünschte Fehlerbehandlung im Browser auslösen kann.

Quellen

  1. MDN: element.innerHTML Security considerations

Weblinks