References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript innerHTML property

Property JavaScript All modern browsers Updated
Quick answer

The innerHTML property gets or sets the HTML inside an element. el.innerHTML = "<b>Hi</b>" replaces the element's content with parsed HTML. It's powerful but risky — never set it from untrusted input, as that opens an XSS hole. For plain text, use the safe textContent instead.

Overview

innerHTML is a property, not a method, that represents the HTML markup inside an element. Read it to get that markup as a string; assign to it to replace everything inside the element with new HTML that the browser parses and renders. container.innerHTML = "<p>Loaded</p>" swaps the contents in one line, which is why it's so commonly used.

That convenience comes with a serious catch. If any part of the string you assign comes from a user or external source, you may be injecting a cross-site scripting (XSS) attack — malicious markup that runs in your page. For anything you don't fully control, do not use innerHTML. Use textContent, which treats everything as plain text and can't execute anything.

There are performance and behavior notes too: assigning to innerHTML destroys and rebuilds the element's children, which wipes any event listeners on them and isn't ideal in a tight loop. For building UI from data, createElement() is safer and more surgical. Reserve innerHTML for trusted, static markup where its brevity genuinely helps.

Syntax

const html = element.innerHTML;        // read
element.innerHTML = "<p>New content</p>"; // replace (parses HTML)

Example

Live example 
<div id="box" style="font:15px system-ui">Old content</div>
<script>
  const box = document.getElementById('box');

  // trusted, static markup only
  box.innerHTML = '<strong style="color:#1c7ce9">New HTML content!</strong>';
</script>

Best practices

  • Never assign untrusted or user-supplied data to innerHTML — it's an XSS risk. Use textContent for plain text.
  • Use it only for HTML you fully control and trust.
  • Remember setting it replaces all children and removes their event listeners.
  • For data-driven UI, prefer createElement() for safety and precision.

Frequently asked questions

What is the difference between innerHTML and textContent?
innerHTML parses the string as HTML (so tags become elements); textContent treats it as plain text. Use textContent for user data — it can't inject scripts.
Is innerHTML safe to use?
Only with content you fully trust. Setting it from user input opens a cross-site scripting (XSS) vulnerability. Use textContent or sanitize the input first.
Why did my event listeners stop working after setting innerHTML?
Assigning to innerHTML rebuilds the inner elements, discarding any listeners attached to them. Re-attach them, or use event delegation on a parent.
How do I add HTML without replacing everything?
Use insertAdjacentHTML() for trusted HTML, or build nodes with createElement() and appendChild().
history.pushState() insertAdjacentHTML()