Element: outerHTML-Eigenschaft

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 durch einen neuen DOM-Baum, der durch das Parsen des angegebenen htmlString erstellt wird.

Wenn auf den Wert null gesetzt, wird dieser null-Wert in den leeren String ("") konvertiert, daher ist elt.outerHTML = null äquivalent zu elt.outerHTML = "".

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, welches ein direktes Kind eines Document ist, wie zum Beispiel Document.documentElement.

HTML

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

JavaScript

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

HTML

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

JavaScript

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.

Wenn das Element keinen übergeordneten Knoten hat, wird das Setzen seiner outerHTML-Eigenschaft es oder seine Nachkommen nicht ändern. Zum Beispiel:

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

Auch wenn das Element im Dokument ersetzt wird, wird die Variable, deren outerHTML-Eigenschaft gesetzt wurde, weiterhin eine Referenz auf das ursprüngliche Element halten:

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 HTML-escapete Attribute enthalten:

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>"

• Serialisieren von DOM-Bäumen in XML-Strings: XMLSerializer
• Parsen von XML oder HTML in DOM-Bäume: DOMParser
• HTMLElement.outerText