Element: innerHTML-Eigenschaft

Eine Zeichenkette, 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 Zeichenkette htmlString angegebenen HTMLs konstruiert werden.

Wenn der Wert auf null gesetzt wird, wird dieser null-Wert in die leere Zeichenkette ("") umgewandelt, sodass elt.innerHTML = null gleichbedeutend mit elt.innerHTML = "" ist.

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einer Zeichenkette zu setzen, die nicht 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 bewirkt, dass der User-Agent das HTML- oder XML-Fragment, das aus den Nachkommen des Elements besteht, serialisiert. Die resultierende Zeichenkette wird zurückgegeben.

let contents = myElement.innerHTML;

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

Das Setzen des Wertes von innerHTML ermöglicht es Ihnen einfach, den vorhandenen Inhalt eines Elements durch neuen Inhalt zu ersetzen.

Beispielsweise 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 geholt und die "<"-Zeichen werden durch die Zeichenreferenz "<" ersetzt, wodurch das HTML im Wesentlichen in einen Rohtext konvertiert wird. Dies wird dann in ein <pre>-Element eingebettet. Dann wird der Wert von innerHTML auf diese neue Zeichenkette geändert. Infolgedessen werden die Dokumentinhalte durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.

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

Operative Details

Was geschieht genau, wenn Sie den Wert von innerHTML setzen? Dadurch veranlasst der User-Agent, die folgenden Schritte durchzuführen:

1. Der angegebene Wert wird als HTML oder XML geparsed (abhängig vom Dokumenttyp), was in einem DocumentFragment-Objekt resultiert, 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 dann das content-Attribut des <template>-Elements durch das neue DocumentFragment, das in Schritt 1 erstellt wurde, ersetzt.
3. Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.

Das Setzen des Wertes von innerHTML ermöglicht es Ihnen, neuen Inhalt dem bestehenden eines Elements hinzuzufügen.

Beispielsweise 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 zum Anhängen von HTML-Elementen (z. B. el.innerHTML += "<a href='…'>link</a>") zur Entfernung von zuvor gesetzten Ereignis-Listenern führt. Das heißt, nachdem Sie auf diese Weise ein HTML-Element hinzugefügt haben, können Sie die zuvor gesetzten Ereignis-Listener nicht mehr nutzen.

Es ist nicht ungewöhnlich, dass innerHTML verwendet wird, um Text in eine Webseite einzufügen. Dies könnte zu einem 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 aussehen mag, 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, sodass immer ein Sicherheitsrisiko besteht, wenn Sie innerHTML verwenden, um Zeichenketten 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 Reintext, da dieser als Rohtext eingefügt wird, anstatt als HTML geparsed 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 log()-Funktion erstellt die Protokollausgabe, indem sie die aktuelle Zeit von einem Date-Objekt mit toLocaleTimeString() abruft und eine Zeichenkette mit dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht der Box mit der Klasse "log" hinzugefügt.

Wir fügen eine zweite Methode hinzu, die Informationen über mousebasierte MouseEvent-Ereignisse 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 Ereignis-Handler für eine Reihe von Mausereignissen auf der Box, die 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 mit einem Kasten umgibt. 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 wie folgt aus. Sie können eine Ausgabe in das Protokoll sehen, indem Sie die Maus in und aus der Box bewegen, darauf klicken und so weiter.

• Node.textContent und HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• HTML oder XML in einen DOM-Baum parsen: DOMParser
• Einen DOM-Baum in eine XML-Zeichenkette serialisieren: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()