Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML below:

Element: outerHTML property - Web APIs

Baseline Widely available

The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.

To only obtain the HTML representation of the contents of an element, or to replace the contents of an element, use the innerHTML property instead.

Note that some browsers serialize the < and > characters as < and > when they appear in attribute values (see Browser compatibility). This is to prevent a potential security vulnerability (mutation XSS) in which an attacker can craft input that bypasses a sanitization function, enabling a cross-site scripting (XSS) attack.

Reading the value of outerHTML returns a string containing an HTML serialization of the element and its descendants. Setting the value of outerHTML replaces the element and all of its descendants with a new DOM tree constructed by parsing the specified htmlString.

When set to the null value, that null value is converted to the empty string (""), so elt.outerHTML = null is equivalent to elt.outerHTML = "".

SyntaxError DOMException

Thrown if an attempt was made to set outerHTML using an HTML string which is not valid.

NoModificationAllowedError DOMException

Thrown if an attempt was made to set outerHTML on an element which is a direct child of a Document, such as Document.documentElement.

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

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

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

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.

If the element has no parent node, setting its outerHTML property will not change it or its descendants. For example:

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

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

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

The returned value will contain HTML escaped attributes:

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

• Serializing DOM trees into XML strings: XMLSerializer
• Parsing XML or HTML into DOM trees: DOMParser
• HTMLElement.outerText

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4