Element: Eigenschaft innerHTML

Eine Zeichenkette, die die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn der Wert von innerHTML gesetzt wird, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die aus der in der Zeichenkette htmlString bereitgestellten HTML-Zeichenkette analysiert werden.

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

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einer Zeichenkette zu setzen, die kein korrekt formatiertes HTML ist.

NoModificationAllowedError DOMException

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

Das Lesen von innerHTML führt dazu, dass der Benutzeragent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Die resultierende Zeichenkette wird zurückgegeben.

let contents = myElement.innerHTML;

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

Das Setzen des Werts von innerHTML ermöglicht es Ihnen, den vorhandenen 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 der body-Eigenschaft des Dokuments löschen:

document.body.textContent = "";

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen, die Zeichen "<" werden durch die Zeichenreferenz "<" ersetzt, wodurch das HTML im Wesentlichen in reinen Text umgewandelt wird. Dieser Text wird dann in ein <pre>-Element eingeschlossen. Dann wird der Wert von innerHTML in diese neue Zeichenkette geändert. Das Ergebnis ist, dass der Inhalt des Dokuments durch eine Anzeige des gesamten Seitenquellcodes ersetzt wird.

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

Betriebliche Details

Was genau passiert, wenn Sie den Wert von innerHTML setzen? Wenn Sie dies tun, führt der Benutzeragent die folgenden Schritte aus:

1. Der angegebene Wert wird als HTML oder XML (basierend auf dem Dokumenttyp) analysiert, was zu einem DocumentFragment-Objekt führt, das den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.
2. Wenn das Element, dessen Inhalt ersetzt wird, ein <template>-Element ist, wird dann das Attribut content des <template>-Elements durch den neuen DocumentFragment ersetzt, der in Schritt 1 erstellt wurde.
3. Bei allen anderen Elementen wird der Inhalt des Elements mit den Knoten im neuen DocumentFragment ersetzt.

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

Zum Beispiel können wir ein neues Listenelement (<li>) zu einer 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 neue HTML-Elemente hinzuzufügen (z.B. el.innerHTML += "<a href='…'>link</a>"), zum Entfernen von zuvor gesetzten Ereignis-Listenern führt. Das heißt, nachdem Sie ein HTML-Element auf diese Weise hinzugefügt haben, können die zuvor festgelegten Ereignis-Listener nicht mehr genutzt werden.

Es ist nicht ungewöhnlich, dass innerHTML verwendet wird, um Text in eine Webseite einzufügen. Dies könnte leicht zu einem Angriffsvektor auf einer Website werden, was 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.

Es gibt jedoch Möglichkeiten, JavaScript ohne <script>-Elemente auszuführen, sodass immer ein Sicherheitsrisiko besteht, wenn Sie innerHTML verwenden, um Zeichenfolgen zu setzen, die nicht unter Ihrer Kontrolle stehen. 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, wenn Sie reinen Text einfügen, da dieser als Rohtext eingefügt wird, anstatt ihn als HTML zu parsen.

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. Anschließend wird die Nachricht an das Feld mit der Klasse "log" angehängt.

Wir fügen eine zweite Methode hinzu, die Informationen über MouseEvent-basierte 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 Ereignishandler für mehrere Mausereignisse 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 für unser Beispiel ist recht einfach.

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

Das <div> mit der Klasse "box" dient einfach als Container zur Layoutgestaltung und stellt die Inhalte in einer Box dar. Das <div> mit der Klasse "log" 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 wie folgt aus. Sie können Ausgaben in das 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
• Serialisieren eines DOM-Baums in eine XML-Zeichenkette: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()