JavaScript Element outerHTML Property

What You’ll Learn

Element.outerHTML is a read/write instance property that gets or sets the HTML of an element including the element itself. Learn how it differs from innerHTML, how setting replaces the node, and XSS caveats—with five examples and try-it labs.

Introduction

Want a string of a whole element (opening tag, contents, closing tag)—or replace that element with new markup? outerHTML does both. Reading serializes the node; writing parses a string and swaps the element out in its parent.

Like innerHTML, it is an injection sink: never assign untrusted HTML without sanitizing. For plain text, prefer textContent on a safe element.

const el = document.querySelector("#example");
console.log(el.outerHTML);
el.outerHTML = "<p class=\"note\">Replaced</p>";

Understanding the Property

MDN: the outerHTML property of the Element 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.

• Get — string of the element and its descendants.
• Set — replace the element in its parent with the parsed result.
• null clears — el.outerHTML = null acts like "".
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

outerHTML

Value

Getting returns a string serialization of the element. Setting accepts a string (or TrustedHTML where enforced) and replaces the element with the parsed nodes.

📋 MDN Read Example Shape

MDN reads the full serialization of an element:

<div id="example">
  <p>My name is Joe</p>
</div>

const element = document.getElementById("example");
console.log(element.outerHTML);
// '<div id="example">\n  <p>My name is Joe</p>\n</div>'
// (whitespace may vary)

Related learning: innerHTML, insertAdjacentHTML(), and Element.replaceWith().

Examples Gallery

Examples follow MDN Element: outerHTML. Labs use trusted static strings so you can practice safely.

const element = document.getElementById("example");
console.log(element.outerHTML.trim());

<div id="example">
  <p>My name is Joe</p>
</div>

const box = document.querySelector("#box");
console.log("inner:", box.innerHTML.trim());
console.log("outer:", box.outerHTML.trim());

inner: <span>Hi</span>
outer: <div id="box"><span>Hi</span></div>

const old = document.getElementById("card");
old.outerHTML = '<article class="card"><strong>New card</strong></article>';
console.log(document.querySelector(".card").textContent);

New card

const el = document.getElementById("item");
el.outerHTML = "<li id=\"item\">Updated</li>";
console.log(el.parentNode); // null — old node is gone from the tree
console.log(document.getElementById("item").textContent); // "Updated"

null
Updated

console.log({
  supported: "outerHTML" in Element.prototype,
  returns: "string (element + descendants)",
  tip: "Setting replaces the element; re-query after assign",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string (element + descendants)",
  "tip": "Setting replaces the element; re-query after assign",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Logging or debugging the full HTML of a node including its tags.
• Replacing a card, list item, or widget with trusted static markup.
• Removing an element by assigning an empty string (outerHTML = "").
• Comparing outerHTML vs innerHTML when teaching DOM serialization.
• Quick demos (prefer safer APIs in production for untrusted data).

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• MDN flags outerHTML as an XSS injection sink—never inject untrusted HTML raw.
• Cannot set outerHTML on a direct child of Document (for example document.documentElement).
• If the element has no parent, setting may leave the value unchanged.
• Shadow roots are omitted from serialization.
• Related: nextElementSibling, innerHTML, part, EventTarget, JavaScript hub.

💡 Best Practices