Web/API/Element/outerHTML

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 a Document, such as Document.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&amp;c=d'></a>"

Specification

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
outerHTML	Chrome Full support 33 Notes' Full support 33 Notes' Notes' This API was previously available on the Node API.	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 Notes' Full support 4.4 Notes' Notes' This API was previously available on the Node API.	Chrome Android Full support 33 Notes' Full support 33 Notes' Notes' This API was previously available on the Node API.	Firefox Android Full support 14	Opera Android Full support 10.1	Safari iOS Full support 9	Samsung Internet Android Full support 2.0 Notes' Full support 2.0 Notes' Notes' This API was previously available on the Node API.

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

Element.outerHTML by Mozilla Contributors is licensed under CC-BY-SA 2.5.