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.
Syntax
var content = element.outerHTML; element.outerHTML = htmlString;
Value
Reading the value of outerHTML
returns a DOMString
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
.
Exceptions
SyntaxError
- An attempt was made to set
outerHTML
using an HTML string which is not valid. NoModificationAllowedError
- 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
var 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
var container = document.getElementById("container"); var d = document.getElementById("d"); console.log(container.firstChild.nodeName); // logs "DIV" d.outerHTML = "<p>This paragraph replaced the original div.</p>"; console.log(container.firstChild.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 element, setting its outerHTML
property will not change it or its descendants. Many browsers will also throw an exception. For example:
var 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:
var p = document.getElementsByTagName("p")[0]; 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:
var 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>"
Specification
Specification | Status | Comment |
---|---|---|
DOM Parsing and Serialization The definition of 'Element.outerHTML' in that specification. |
Working Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outerHTML | Chrome
Full support
33
| Edge Full support 12 | Firefox Full support 11 | IE Full support 4 | Opera Full support 8 | Safari Full support 9 | WebView Android
Full support
4.4
| Chrome Android
Full support
33
| Firefox Android Full support 14 | Opera Android Full support 10.1 | Safari iOS Full support 9 | Samsung Internet Android
Full support
2.0
|
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
See also
- Serializing DOM trees into XML or HTML:
XMLSerializer
- Parsing XML or HTML into DOM trees:
DOMParser
HTMLElement.outerText