Element: innerHTML-Eigenschaft

Eine Zeichenfolge, die die HTML-Serialisierung der Nachkommen des Elements enthält. Das Setzen des Wertes von innerHTML entfernt alle Nachkommen des Elements und ersetzt sie durch Knoten, die durch das Parsen des in der Zeichenfolge htmlString angegebenen HTMLs konstruiert werden.

Wenn null gesetzt wird, wird dieser null-Wert in die leere Zeichenfolge ("") umgewandelt, sodass elt.innerHTML = null äquivalent zu elt.innerHTML = "" ist.

SyntaxError DOMException

Wird ausgelöst, wenn versucht wird, den Wert von innerHTML mit einer Zeichenfolge zu setzen, die kein ordentlich formatiertes HTML ist.

NoModificationAllowedError DOMException

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

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

let contents = myElement.innerHTML;

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

Das Setzen des Wertes von innerHTML ermöglicht es Ihnen, den bestehenden Inhalt eines Elements einfach durch neuen 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 = "";

Dieses Beispiel holt das aktuelle HTML-Markup des Dokuments und ersetzt die "<"-Zeichen mit der Zeichenreferenz "<", wodurch das HTML im Wesentlichen in Rohtext umgewandelt wird. Dies wird dann in ein <pre>-Element eingebettet. Dann wird der Wert von innerHTML in diese neue Zeichenfolge geändert. Als Ergebnis 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? Dies veranlasst den Benutzeragenten, die folgenden Schritte auszuführen:

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 von 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 mit dem neuen DocumentFragment ersetzt, der in Schritt 1 erstellt wurde.
3. Für alle anderen Elemente wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.

Das Setzen des Wertes von innerHTML ermöglicht es Ihnen, neue Inhalte zu den bestehenden eines Elements hinzuzufügen.

Zum Beispiel können wir ein neues Listenelement (<li>) zu der bestehenden Liste (<ul>) hinzufügen:

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, um HTML-Elemente hinzuzufügen (z.B. el.innerHTML += "<a href='…'>link</a>"), zur Entfernung aller zuvor gesetzten Ereignis-Listener führt. Das heißt, nachdem Sie ein HTML-Element auf diese Weise hinzugefügt haben, können Sie die zuvor gesetzten Ereignis-Listener nicht mehr verwenden.

Es ist nicht ungewöhnlich, dass innerHTML verwendet wird, um Text in eine Webseite einzufügen. Es besteht jedoch das Potenzial, dass dies zu einem Angriffsvektor auf einer Seite wird und ein potenzielles Sicherheitsrisiko darstellt.

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.

Jedoch gibt es Möglichkeiten, JavaScript ohne Verwendung von <script>-Elementen auszuführen, daher besteht immer noch ein Sicherheitsrisiko, wenn Sie innerHTML verwenden, um Zeichenfolgen 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, statt innerHTML folgendes zu verwenden:

• Node.textContent, wenn Sie nur einfachen Text einfügen, da dieser als Rohtext eingefügt wird, anstatt als HTML geparst zu werden.

Dieses Beispiel verwendet innerHTML, um einen Mechanismus zum Protokollieren von Nachrichten in einem Feld 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 mittels toLocaleTimeString() erhält und eine Zeichenfolge mit dem Zeitstempel und dem Nachrichtentext erstellt. Anschließend wird die Nachricht in das Feld 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);
}

Anschließend verwenden wir dies als Ereignis-Handler für eine Reihe von Mausereignissen auf dem Feld, das 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 ziemlich einfach.

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

Der <div> mit der Klasse "box" ist einfach ein Container zu Layoutzwecken, der den Inhalt mit einem Rahmen darstellt. Der <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext selbst.

Das folgende CSS gestaltet unsere Beispielinhalte.

.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;
}

Das resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll sehen, indem Sie die Maus in und aus der Box bewegen, darin klicken und so weiter.

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