Element.outerHTML gets or sets the HTML of the element and its descendants (MDN). Reading serializes the element; writing replaces the element in its parent.
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Syntax
Use el.outerHTML. Start with this line.
JavaScript
element.outerHTML / = value
Call
What it does
element.outerHTML / = value
Primary signature.
Built into the browser. Read or assign el.outerHTML — no import required.
Library declarations
JavaScript
element.outerHTML / = value
Parameters
This member has no parameters beyond those shown in the signature.
Return Value
Return Value
Description
*
The current value of el.outerHTML.
JavaScript Examples
Example 1 — Read outerHTML
Serialize an element including its own tags (MDN shape).
JavaScript
const el = document.getElementById("example");
console.log(el.outerHTML);
// includes <div id="example">…</div>
Find the element.getElementById("example") returns the <div>.
Read outerHTML. The browser serializes the element and its children.
Tags are included. You see the opening/closing <div>, not only the inside.
Compare later with innerHTML if you only need the contents.
Example 2 — Replace the Element
Assign trusted HTML to replace the node in its parent.
JavaScript
const p = document.querySelector("p");
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // "P" (stale — old node)
console.log(document.querySelector("div").textContent);
// "This div replaced a paragraph."
Select a live element that has a parent in the document.
Assign trusted HTML. The browser parses it and swaps the element out.
Variable is stale.p still points to the old paragraph node.
Re-query if you need the new node from the document.
Example 3 — outerHTML vs innerHTML
Same start node — replace inside vs replace the whole element.
JavaScript
const a = document.getElementById("a");
const b = document.getElementById("b");
a.innerHTML = "<strong>Hi</strong>"; // a stays; children change
b.outerHTML = "<strong>Hi</strong>"; // b is replaced
console.log(document.getElementById("a").tagName); // "DIV"
console.log(document.getElementById("b")); // null
innerHTML keeps the element. Only the children are rebuilt.
outerHTML replaces the element. The old id may disappear.
Re-check the DOM.#a still exists; #b does not.
Choose by intent. Contents only → innerHTML; whole node → outerHTML.
Compatibility
Browser Support
Element.outerHTML is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.
✓ Baseline · Widely available
Element.outerHTML
Get or set HTML of the element and its descendants — setting replaces the element.
99%Widely available
Google ChromeAll versions · Desktop & Mobile
Full support
Mozilla FirefoxAll versions · Desktop & Mobile
Full support
Apple SafariAll versions · macOS & iOS
Full support
Microsoft EdgeAll versions · Chromium & Legacy
Full support
Internet ExplorerIE 6+ · Legacy environments
Full support
OperaAll modern versions
Full support
outerHTMLExcellent
Bottom line: Safe API availability-wise. Security depends on what you assign — use trusted HTML only.
Frequently Asked Questions
It gets the HTML of an element including the element itself, or sets new HTML that replaces that element in its parent.
No. MDN marks Element.outerHTML as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
innerHTML is only the markup inside the element. outerHTML includes the element's own tags plus contents. Setting outerHTML replaces the element; setting innerHTML replaces its children.
The variable still references the original node, which is detached after replace. Query the document again to get the new node.
Only with trusted markup. Untrusted strings can cause XSS—same class of risk as innerHTML. Prefer textContent for plain text, or sanitize / Trusted Types.
No. Setting outerHTML on a direct child of Document throws. Replace contents of body or a container instead.
