Element: outerHTML property
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.
Value
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 = ""
.
Exceptions
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 aDocument
, such asDocument.documentElement
.
Examples
Getting the value of an element's outerHTML property
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
Replacing a node by setting the outerHTML property
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.
Notes
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&c=d'></a>"
Specifications
Specification |
---|
HTML Standard # dom-element-outerhtml |
Browser compatibility
BCD tables only load in the browser
See also
- Serializing DOM trees into XML strings:
XMLSerializer
- Parsing XML or HTML into DOM trees:
DOMParser
HTMLElement.outerText