Element.innerHTML gets or sets the HTML markup inside an element (MDN). Reading serializes descendants; writing parses HTML and replaces all children.
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use el.innerHTML. Start with this line.
element.innerHTML / = value| Call | What it does |
|---|---|
element.innerHTML / = value | Primary signature. |
Built into the browser. Read or assign el.innerHTML — no import required.
element.innerHTML / = value| Parameter | Description |
|---|---|
| Clear | Optional. el.innerHTML = "" (or null) |
| Return Value | Description |
|---|---|
| * | The current value of el.innerHTML. |
innerHTMLSerialize the HTML inside a container (MDN shape).
const el = document.getElementById("example");
console.log(el.innerHTML);
// includes the nested <p> markupgetElementById("example") returns the <div>.innerHTML. The browser serializes the child nodes to a string.<p>…</p>, not only the visible text.Assign trusted HTML to wipe and rebuild the children.
const box = document.getElementById("box");
box.innerHTML = "<p>Hello</p><p>World</p>";
console.log(box.children.length); // 2
console.log(box.innerHTML);box is replaced.<p> nodes → children.length is 2.innerHTML vs textContentSame string, two meanings — tags vs literal text.
const a = document.getElementById("a");
const b = document.getElementById("b");
const s = "<strong>Hi</strong>";
a.innerHTML = s; // creates a <strong> element
b.textContent = s; // shows the tags as text
console.log(a.children.length); // 1
console.log(b.children.length); // 0
console.log(b.textContent); // "<strong>Hi</strong>"innerHTML parses tags. You get a real <strong> child.textContent does not. Angle brackets become visible text.textContent; trusted HTML structure → innerHTML.Element.innerHTML is Baseline Widely available (MDN: since July 2015). Some serialization edge cases differ slightly by browser.
Get or set HTML inside an element — replace children; treat untrusted input carefully.
Bottom line: Safe API availability-wise. Security depends on what you assign — use trusted HTML only.
Learn how to read the last child Element of a parent.
18 people found this page helpful