JavaScript/DOM/Element/innerHTML
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.
Inhaltsverzeichnis
Anwendungsbeispiel
function init() {
document.getElementById('button').addEventListener('click',changeHTMLContent);
}
function changeHTMLContent() {
var neu = "neuer <b>fetter</b> Text";
document.getElementById('absatz').innerHTML = neu;
}
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.
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:
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>";
}
}
changeHTMLContent()
aufgerufen. Diese Funktion weist dem Absatz mit derid="absatz"
für die Eigenschaft innerHTML den Wert der zuvor definierten Variablenneu
zu. Der Inhalt des Absatzes ändert sich dann dynamisch und berücksichtigt dabei auch die HTML-Formatierung<b>...</b>
beim neuen Inhalt des Elements.