element.innerHTML
Reads/writes HTML inside an element (powerful but XSS-prone).
el.innerHTML = '<span>Hi</span>';
const html = el.innerHTML;This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
Reads/writes HTML inside an element (powerful but XSS-prone).
The innerHTML property provides a way to retrieve or replace the HTML markup contained within an element as a string. When you read innerHTML, the browser serializes the current DOM tree inside the element. When you set innerHTML, the browser removes all existing child nodes, parses the new HTML string into a DOM fragment, and inserts the resulting nodes. While powerful for quick templates, it is significantly slower than direct DOM manipulation methods like textContent or appendChild for small updates because it requires invoking the HTML parser. A major security risk is Cross-Site Scripting (XSS); if you insert untrusted user input via innerHTML, an attacker could execute malicious scripts (e.g., via <img src=x onerror=... >). Furthermore, setting innerHTML destroys all existing child nodes and their associated event listeners, even if you are just appending content using the += operator.
Quick reference
Syntax
el.innerHTML = '<span>Hi</span>';
const html = el.innerHTML;See it in practice
Examples
Updating element content
const container = document.getElementById('content');
container.innerHTML = '<h2>Updated Title</h2><p>New content loaded.</p>';HTML structure inside container is replaced with the h2 and p elements.
Completely replaces the existing inner DOM of the element with the specified HTML structure.
Reading nested HTML structure
const list = document.querySelector('ul');
console.log(list.innerHTML);'<li>Item 1</li><li>Item 2</li>' (example output)
Returns a string containing the serialized HTML of all descendants within the element.
Demonstrating XSS vulnerability
const userInput = "<img src='invalid' onerror='alert(\"Hacked!\")'>";
const div = document.createElement('div');
// DANGEROUS: This will execute the alert
div.innerHTML = userInput;
document.body.appendChild(div);An alert box appears saying 'Hacked!'
Shows how malicious strings can execute code when parsed through innerHTML. Always sanitize data before use.
Debug faster
Common Errors
LogicError
Cause: Using += to append content to an element.
Fix: Use element.insertAdjacentHTML('beforeend', html) or appendChild() to preserve existing DOM nodes and event listeners.
const btn = document.querySelector('button');
btn.addEventListener('click', () => {});
// This destroys the button's event listener because the whole innerHTML is re-parsed:
document.body.innerHTML += '<div>New Div</div>';SecurityError
Cause: Inserting unsanitized user-provided strings into the DOM.
Fix: Use textContent if you only need to show text, or use a library like DOMPurify to sanitize HTML strings.
const name = new URLSearchParams(window.location.search).get('name');
// High XSS risk:
document.getElementById('welcome').innerHTML = 'Hello, ' + name;Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
Reads/writes HTML inside an element (powerful but XSS-prone).
LogicError: Use element.insertAdjacentHTML('beforeend', html) or appendChild() to preserve existing DOM nodes and event listeners. SecurityError: Use textContent if you only need to show text, or use a library like DOMPurify to sanitize HTML strings.