JavaScript Element innerHTML Property

What You’ll Learn

Element.innerHTML is a read/write instance property that gets or sets the HTML markup inside an element. Learn how to read and replace contents safely, when to prefer textContent, and how XSS risks appear—with five examples and try-it labs.

Introduction

Need the HTML inside a box as a string—or replace that box’s children with new markup? innerHTML does both. Reading serializes descendants; writing parses a string into a new child tree.

It is powerful and common, but MDN warns it is an injection sink: untrusted strings can become XSS. For plain text from users, prefer textContent.

const box = document.querySelector("#example");
console.log(box.innerHTML);
box.innerHTML = "<p>Updated</p>";

Understanding the Property

MDN: the innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element.

• Get — string serialization of descendant nodes.
• Set — parse HTML and replace all children.
• null clears — el.innerHTML = null acts like "".
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

innerHTML

Value

Getting returns a string of the element’s HTML contents. Setting accepts a string (or TrustedHTML where enforced) and replaces descendants with the parsed result.

📋 MDN Read Example Shape

MDN reads the markup inside a container:

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

const myElement = document.querySelector("#example");
const contents = myElement.innerHTML;
console.log(contents);
// "\n  <p>My name is Joe</p>\n" (whitespace may vary)

Related learning: outerHTML, textContent, and insertAdjacentHTML().

Examples Gallery

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

const myElement = document.querySelector("#example");
console.log(myElement.innerHTML.trim());

<p>My name is Joe</p>

const box = document.querySelector("#box");
box.innerHTML = "<strong>Hello</strong> world";
console.log(box.firstElementChild.tagName);
console.log(box.textContent);

STRONG
Hello world

const box = document.querySelector("#box");
console.log(box.children.length); // 1
box.innerHTML = "";
console.log(box.children.length); // 0
console.log(box.innerHTML); // ""

1
0

const a = document.getElementById("a");
const b = document.getElementById("b");
a.innerHTML = "<em>Hi</em>";
b.textContent = "<em>Hi</em>";
console.log(a.firstElementChild !== null); // true (EM)
console.log(b.firstElementChild); // null (literal text)

true
null

console.log({
  supported: "innerHTML" in Element.prototype,
  returns: "string (HTML of descendants)",
  tip: "Use textContent for plain / untrusted text",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string (HTML of descendants)",
  "tip": "Use textContent for plain / untrusted text",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Reading a template fragment as an HTML string for debugging or cloning patterns.
• Replacing a panel’s contents with trusted static markup.
• Clearing a container before rebuilding UI (innerHTML = "").
• Quick demos and tutorials (prefer safer APIs in production for untrusted data).
• Pairing with insertAdjacentHTML when you need to append instead of replace.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• MDN flags innerHTML as a common XSS vector—never inject untrusted HTML raw.
• Shadow roots are omitted from serialization; use getHTML() when you need them.
• Related: id, outerHTML, textContent, lastElementChild, JavaScript hub.

💡 Best Practices