Element.outerHTML
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, that is if it is the root element of the document, setting its outerHTML
property will throw a DOMException
with the error code NO_MODIFICATION_ALLOWED_ERR
. For example:
document.documentElement.outerHTML = "test"; // 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. |
Living Standard |
Browser compatibility
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) |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/element/outerhtml