Element: innerHTML-Eigenschaft

Ein String, der 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 htmlString angegebenen HTMLs konstruiert werden.

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

SyntaxError DOMException

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

NoModificationAllowedError DOMException

Wird ausgelöst, wenn versucht wird, 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.

const contents = myElement.innerHTML;

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

Das Setzen des Wertes von innerHTML ermöglicht es Ihnen, den vorhandenen Inhalt eines Elements leicht 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 löschen:

document.body.textContent = "";

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die "<"-Zeichen mit der Zeichenreferenz "<" ersetzt, wodurch das HTML im Wesentlichen in Rohtext umgewandelt wird. Dies wird dann in ein <pre>-Element eingewickelt. Anschließend wird der Wert von innerHTML auf diese neue Zeichenfolge geändert. Als Ergebnis wird der Dokumentinhalt durch die Anzeige des gesamten Quellcodes der Seite ersetzt.

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

Betriebstechnische Details

Was genau passiert, wenn Sie den Wert von innerHTML setzen? Dies führt dazu, dass der Benutzeragent die folgenden Schritte ausführt:

1. Der angegebene Wert wird als HTML oder XML (abhängig vom 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, dann wird das content Attribut des <template>-Elements durch das neue DocumentFragment ersetzt, das 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 an den bestehenden 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 das Verwenden von innerHTML, um HTML-Elemente hinzuzufügen (z.B., el.innerHTML += "<a href='…'>link</a>"), zur Entfernung aller zuvor gesetzten Event-Listener führen wird. Das heißt, nachdem Sie auf diese Weise ein HTML-Element hinzugefügt haben, können Sie die zuvor gesetzten Event-Listener nicht mehr verwenden.

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

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 auszuführen, ohne <script>-Elemente zu verwenden. Daher besteht immer 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, anstelle von innerHTML:

• Node.textContent zu verwenden, wenn reiner Text eingefügt wird, 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 Zeit von einem Date Objekt mit toLocaleTimeString() abruft und eine Zeichenfolge mit dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an das Feld mit der Klasse "log" angehängt.

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

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 im 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 recht einfach.

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

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

Das folgende CSS stylt unser 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 die Ausgabe im Protokoll sehen, indem Sie die Maus in und aus der Box bewegen, darin klicken usw.

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