Element: innerHTML Eigenschaft

Ein String, der die HTML-Serialisierung der Nachfahren des Elements enthält. Wenn der Wert von innerHTML gesetzt wird, werden alle Nachfahren des Elements entfernt und durch Knoten ersetzt, die durch Parsen des HTMLs in der Zeichenkette htmlString konstruiert wurden.

Wenn er auf den Wert 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 kein korrekt formatiertes HTML ist.

NoModificationAllowedError DOMException

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

Das Lesen von innerHTML führt dazu, dass der User-Agent das HTML- oder XML-Fragment, das von den Nachfahren des Elements gebildet wird, serialisiert. Die resultierende Zeichenkette wird zurückgegeben.

let contents = myElement.innerHTML;

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

Das Setzen des Werts 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 = "";

Dieses Beispiel ruft das aktuelle HTML-Markup des Dokuments ab 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 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 passiert genau, wenn Sie den Wert von innerHTML setzen? Wenn Sie dies tun, folgt der User-Agent diesen Schritten:

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 Inhalte ersetzt werden, ein <template> Element ist, dann wird das <template> Elementattribut content mit dem in Schritt 1 erstellten neuen DocumentFragment ersetzt.
3. Für alle anderen Elemente werden die Inhalte des Elements durch die Knoten im neuen DocumentFragment ersetzt.

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

Zum Beispiel können wir ein neues Listenelement (<li>) zur vorhandenen 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 anzuhängen (z.B. el.innerHTML += "<a href='…'>link</a>"), zur Entfernung aller zuvor gesetzten Ereignis-Listener führen wird. Das heißt, nachdem Sie ein HTML-Element auf diese Weise anhängen, können Sie die vorher gesetzten Ereignis-Listener nicht mehr verwenden.

Es ist nicht ungewöhnlich, innerHTML zu verwenden, um Text in eine Webseite einzufügen. Dies könnte jedoch zu einem Angriffsvektor auf einer Webseite 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. HTML gibt an, dass ein <script> Tag, der mit innerHTML eingefügt wird, nicht ausgeführt werden sollte.

Es gibt jedoch Möglichkeiten, JavaScript ohne Verwendung von <script> Elementen auszuführen, daher besteht immer ein Sicherheitsrisiko, 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, statt innerHTML zu verwenden:

• Node.textContent beim Einfügen von gewöhnlichem Text, 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 aus einem Date Objekt mit toLocaleTimeString() erhält und eine Zeichenkette 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 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 für unser Beispiel ist 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 die Inhalte mit einem Kasten umgibt. Das <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext selbst.

Das folgende CSS formatiert 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 in das Protokoll sehen, indem Sie die Maus hinein- und herausbewegen, darauf 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 einen XML-String: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()