Element: innerHTML-Eigenschaft

Ein String, der die HTML-Serialisierung der Nachkommen des Elements enthält. Das Setzen des innerHTML-Werts entfernt alle Nachkommen des Elements und ersetzt sie durch Knoten, die durch das Parsen des im String htmlString angegebenen HTMLs erstellt wurden.

Wenn auf den Wert null gesetzt, wird dieser null-Wert in den leeren String ("") konvertiert, sodass elt.innerHTML = null gleichbedeutend ist mit elt.innerHTML = "".

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einem String zu setzen, der kein korrekt formatiertes HTML ist.

NoModificationAllowedError DOMException

Wird ausgelöst, wenn versucht wurde, das HTML in einen Knoten einzufügen, dessen Elternknoten ein Document ist.

Das Lesen von innerHTML veranlasst den Benutzeragenten, das aus den Nachkommen des Elements bestehende HTML- oder XML-Fragment zu serialisieren. Der resultierende String wird zurückgegeben.

const contents = myElement.innerHTML;

Dies ermöglicht es Ihnen, das HTML-Markup der Inhaltsknoten des Elements anzusehen.

Das Setzen des innerHTML-Werts ermöglicht es Ihnen, den bestehenden Inhalt eines Elements einfach mit neuem Inhalt zu ersetzen.

Zum Beispiel können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des body-Attributs des Dokuments leeren:

document.body.textContent = "";

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die "<"-Zeichen werden durch die Zeichenreferenz "<" ersetzt, wodurch im Wesentlichen das HTML in Rohtext konvertiert wird. Dies wird dann in ein <pre>-Element eingebettet. Anschließend wird der Wert von innerHTML auf diesen neuen String geändert. Infolgedessen wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
  /</g,
  "&lt;",
)}</pre>`;

Betriebliche Details

Was genau passiert, wenn Sie den Wert von innerHTML setzen? Das Veranlassen führt dazu, dass der Benutzeragent folgende Schritte ausführt:

1. Der angegebene Wert wird als HTML oder XML (basierend auf dem Dokumenttyp) geparst, was zu einem DocumentFragment-Objekt führt, das die neue Menge an DOM-Knoten für die neuen Elemente darstellt.
2. Wenn das Element, dessen Inhalt ersetzt wird, ein <template>-Element ist, wird das content-Attribut des <template>-Elements durch das in Schritt 1 erstellte neue DocumentFragment ersetzt.
3. Für alle anderen Elemente wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.

Das Setzen des innerHTML-Werts ermöglicht es Ihnen, neuen Inhalt an den bestehenden Inhalt eines Elements anzuhängen.

Zum Beispiel können wir ein neues Listenelement (<li>) an die bestehende Liste (<ul>) anhängen:

HTML

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

Bitte beachten Sie, dass die Verwendung von innerHTML zum Anhängen von HTML-Elementen (z. B. el.innerHTML += "<a href='…'>link</a>") dazu führen wird, dass alle zuvor gesetzten Event-Listener entfernt werden. Das heißt, nachdem Sie auf diese Weise ein HTML-Element angehängt haben, können Sie die zuvor gesetzten Event-Listener nicht mehr hören.

Es ist nicht ungewöhnlich, dass innerHTML verwendet wird, um Text in eine Webseite einzufügen. Dies kann ein Angriffspunkt auf einer Website werden und birgt ein potenzielles Sicherheitsrisiko.

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Obwohl dies wie ein Cross-Site Scripting-Angriff aussieht, ist das Ergebnis harmlos. Ein mit innerHTML eingefügtes <script>-Tag wird nicht ausgeführt.

Es gibt jedoch Möglichkeiten, JavaScript ohne Verwendung von <script>-Elementen auszuführen, sodass immer dann ein Sicherheitsrisiko besteht, wenn Sie innerHTML verwenden, um Strings zu setzen, über die Sie keine Kontrolle haben. Zum Beispiel:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

Aus diesem Grund wird empfohlen, anstelle von innerHTML Folgendes zu verwenden:

• Node.textContent beim Einfügen von reinem Text, da dieser als Rohtext eingefügt wird, anstatt ihn als HTML zu parsen.

Dieses Beispiel verwendet innerHTML, um einen Mechanismus zum Protokollieren von Meldungen in einem Kasten auf einer Webseite zu erstellen.

function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const timeStr = time.toLocaleTimeString();
  logElem.innerHTML += `${timeStr}: ${msg}<br/>`;
}

log("Logging mouse events inside this container…");

Die Funktion log() erstellt die Protokollausgabe, indem sie die aktuelle Uhrzeit von einem Date-Objekt mithilfe von toLocaleTimeString() abruft und einen String mit dem Zeitstempel und dem Meldungstext erstellt. Dann wird die Nachricht an den Kasten mit der Klasse "log" angehängt.

Wir fügen eine zweite Methode hinzu, die Informationen über auf MouseEvent basierende Ereignisse (wie mousedown, click und mouseenter) protokolliert:

function logEvent(event) {
  const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
  log(msg);
}

Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen auf dem Kasten, der unser Protokoll enthält:

const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

Das HTML ist für unser Beispiel recht einfach.

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

Das <div> mit der Klasse "box" ist nur ein Container für Layoutzwecke, der den Inhalt in einem Kasten präsentiert. Das <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext selbst.

Das folgende CSS gestaltet unseren Beispielinhalt.

.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}

Der resultierende Inhalt sieht so aus. Sie können Ausgaben im Protokoll sehen, indem Sie die Maus hinein- und herausbewegen, darin klicken und so weiter.

• Node.textContent und HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• Parsen von HTML oder XML in einen DOM-Baum: DOMParser
• Serialisieren eines DOM-Baums in einen XML-String: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()