Element: outerHTML-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das outerHTML-Attribut der Element DOM-Schnittstelle erhält das serialisierte HTML-Fragment, das das Element einschließlich seiner Nachkommen beschreibt. Es kann auch gesetzt werden, um das Element mit aus dem angegebenen String geparsten Knoten zu ersetzen.

Um nur die HTML-Darstellung der Inhalte eines Elements zu erhalten oder die Inhalte eines Elements zu ersetzen, verwenden Sie stattdessen die innerHTML-Eigenschaft.

Beachten Sie, dass einige Browser die Zeichen < und > als &lt; und &gt; serialisieren, wenn sie in Attributwerten auftreten (siehe Browser-Kompatibilität). Dies dient dazu, eine potenzielle Sicherheitslücke zu verhindern (mutation XSS), bei der ein Angreifer eine Eingabe erstellen kann, die eine Sanisierungsfunktion umgeht und so einen Cross-Site-Scripting (XSS) Angriff ermöglicht.

Wert

Das Lesen des Wertes von outerHTML gibt einen String zurück, der eine HTML-Serialisierung des element und seiner Nachkommen enthält. Das Setzen des Wertes von outerHTML ersetzt das Element und alle seine Nachkommen mit einem neuen DOM-Baum, der durch das Parsen des angegebenen htmlString konstruiert wurde.

Wenn auf den Wert null gesetzt, wird dieser null Wert in den leeren String ("") umgewandelt, sodass elt.outerHTML = null dem entspricht elt.outerHTML = "".

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wird, outerHTML mit einem HTML-String zu setzen, der nicht gültig ist.

NoModificationAllowedError DOMException

Wird ausgelöst, wenn versucht wird, outerHTML auf einem Element zu setzen, das ein direkter Nachkomme eines Document ist, wie zum Beispiel Document.documentElement.

Beispiele

Den Wert der outerHTML-Eigenschaft eines Elements abrufen

HTML

html
<div id="d"> <p>Content</p> <p>Further Elaborated</p> </div>

JavaScript

js
const d = document.getElementById("d"); console.log(d.outerHTML); // The string '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' // is written to the console window

Ersetzen eines Knotens durch Setzen der outerHTML-Eigenschaft

HTML

html
<div id="container"> <div id="d">This is a div.</div> </div>

JavaScript

js
const container = document.getElementById("container"); const d = document.getElementById("d"); console.log(container.firstElementChild.nodeName); // logs "DIV" d.outerHTML = "<p>This paragraph replaced the original div.</p>"; console.log(container.firstElementChild.nodeName); // logs "P" // The #d div is no longer part of the document tree, // the new paragraph replaced it.

Hinweise

Wenn das Element keinen Elternknoten hat, ändert das Setzen seiner outerHTML-Eigenschaft weder das Element noch seine Nachkommen. Zum Beispiel:

js
const div = document.createElement("div"); div.outerHTML = '<div class="test">test</div>'; console.log(div.outerHTML); // output: "<div></div>"

Zudem wird das Element zwar im Dokument ersetzt, aber die Variable, deren outerHTML-Eigenschaft gesetzt wurde, hält weiterhin den Verweis auf das ursprüngliche Element:

js
const p = document.querySelector("p"); console.log(p.nodeName); // shows: "P" p.outerHTML = "<div>This div replaced a paragraph.</div>"; console.log(p.nodeName); // still "P";

Der zurückgegebene Wert wird Eigenschaften mit HTML-Escapes enthalten:

js
const anc = document.createElement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"

Spezifikationen

Specification
HTML
# dom-element-outerhtml

Browser-Kompatibilität

Siehe auch