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.


var content = element.outerHTML;

element.outerHTML = htmlString;


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.


An attempt was made to set outerHTML using an HTML string which is not valid.
An attempt was made to set outerHTML on an element which is a direct child of a Document, such as Document.documentElement.


Getting the value of an element's outerHTML property:

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

d = document.getElementById("d");

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

container = document.getElementById("container");
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.


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


Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.outerHTML' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
outerHTMLChrome Full support 33
Full support 33
Notes This API was previously available on the Node API.
Edge Full support 14Firefox Full support 11IE Full support 4Opera Full support 7Safari Full support 9WebView Android Full support Yes
Full support Yes
Notes This API was previously available on the Node API.
Chrome Android Full support 33
Full support 33
Notes This API was previously available on the Node API.
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support
See implementation notes.
See implementation notes.

See also