Summary

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

Syntax

var content = element.outerHTML;

On return, content contains the serialized HTML fragment describing the element and its descendants.

element.outerHTML = content;

Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.

Examples

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");
dump(d.outerHTML);

// the string '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// is dumped 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.

Notes

If the element has no parent element, setting its outerHTML property will throw a DOMException with the error code NO_MODIFICATION_ALLOWED_ERR. This could happen when trying to manipulate the root element of the document or a newly created element that hasn't any parent element yet. For example:

document.documentElement.outerHTML = "test";  // throws a DOMException

var div = document.createElement("div");
div.outerHTML = "<div class=\"test\">test</div>"; // throws a DOMException

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

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 11 (11) 0.2 4.0 7 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 11.0 (11) (Yes) (Yes) (Yes)

Compatibility notes

Firefox (58) throws no exception when trying to set outerHTML for a element without parent.

See also

Document Tags and Contributors

 Last updated by: appelgran,