JavaScript Element setHTML() Method

What You’ll Learn

Element.setHTML() is an instance method that sanitizes and injects HTML into an element using the HTML Sanitizer API. Learn MDN’s script-stripping demo, default vs custom Sanitizer options, why it beats innerHTML for user content, mutation XSS (mXSS) rules, and five try-it labs aligned with MDN.

Introduction

Setting HTML from a string is common in rich editors, comment widgets, and dynamic UIs. The classic approach — element.innerHTML = userHtml — is dangerous with untrusted input because it can run scripts or event handlers.

element.setHTML(input, options) parses the string, sanitizes it with the HTML Sanitizer API, and inserts the result as a subtree of the element (MDN). MDN recommends it as a drop-in replacement for innerHTML when the HTML comes from users.

This page is part of JavaScript Element. Pair with getHTML() (serialize out) and insertAdjacentHTML() (insert at positions).

Understanding the setHTML() Method

Calling el.setHTML(input, options) sanitizes input and replaces the element’s contents with the safe subtree (MDN).

• It is an instance method on Element.
• input — HTML string to sanitize and inject (MDN).
• options.sanitizer — optional Sanitizer, SanitizerConfig, or "default" (MDN).
• Returns undefined.
• Drops elements invalid in the current element’s context (e.g. tr outside table) (MDN).
• Throws TypeError for invalid sanitizer config (MDN).
• Unsafe alternative: setHTMLUnsafe() when you explicitly need unsanitized HTML (MDN).

📝 Syntax

General form of Element.setHTML (MDN):

setHTML(input)
setHTML(input, options)

Parameters

• input — string of HTML to sanitize and inject (MDN).
• options.sanitizer (optional) — Sanitizer, SanitizerConfig, or "default". Uses default config if omitted (MDN).

Return value

undefined (MDN).

Exceptions

• TypeError — invalid SanitizerConfig, invalid string for sanitizer, or non-Sanitizer value (MDN).

Common patterns

const target = document.getElementById("target");
const userHtml = '<p>Hello</p><script>alert(1)</script>';

// Default sanitizer (MDN)
target.setHTML(userHtml);

// Custom Sanitizer
const sanitizer = new Sanitizer({ elements: ["div", "p", "button"] });
target.setHTML(userHtml, { sanitizer });

// SanitizerConfig inline
target.setHTML(userHtml, {
  sanitizer: { removeElements: ["div"] }
});

Examples Gallery

Examples follow MDN Element.setHTML() patterns. Use View Output or Try It Yourself for each case. Feature-detect setHTML and Sanitizer in supporting browsers.

const unsanitizedString = 'abc <script>alert(1)</script> def';
const target = document.getElementById("target");

target.setHTML(unsanitizedString);

console.log(target.innerHTML); // "abc  def" — script removed

abc  def

const userHtml = '<p>Safe text</p><img src=x onerror=alert(1)>';
const box = document.getElementById("box");

// Safe — onclick/onerror stripped (MDN)
box.setHTML(userHtml);

// Avoid with untrusted input:
// box.innerHTML = userHtml;

console.log(box.innerHTML);

<p>Safe text</p><img src="x">

const unsanitizedString = '<div><p>Hi</p><script>alert(1)</script></div>';
const target = document.getElementById("target");

const sanitizer = new Sanitizer({
  elements: ["div", "p", "button", "script"] // script still removed (MDN)
});

target.setHTML(unsanitizedString, { sanitizer });

console.log(target.innerHTML);

<div><p>Hi</p></div>

const html = '<div><p>Keep</p><button>Go</button></div>';
const target = document.getElementById("target");

target.setHTML(html, {
  sanitizer: { removeElements: ["div", "p", "button", "script"] }
});

console.log(target.innerHTML); // "" or minimal safe output

const unsafeString = userInput;
const div = document.getElementById("a");
const otherDiv = document.getElementById("b");

// Safe
div.setHTML(unsafeString);

// UNSAFE — serialized HTML is no longer sanitized
// const serialized = div.innerHTML;
// otherDiv.innerHTML = serialized;

// Safe re-inject — setHTML re-sanitizes
const serialized = div.innerHTML;
otherDiv.setHTML(serialized);

re-sanitized safely

🚀 Common Use Cases

• Rendering user-submitted rich text in comments or forums.
• Injecting CMS or markdown-to-HTML output safely.
• Building WYSIWYG editors that accept pasted HTML.
• Replacing innerHTML assignments with sanitized insertion (MDN).
• Applying custom Sanitizer allow-lists for constrained markup.
• Pairing with getHTML() when round-tripping markup.

📝 Notes

• Limited availability on MDN — not yet Baseline in all major browsers. Feature-detect before use.
• Not Deprecated, Experimental, or Non-standard — defined in the HTML specification.
• Always removes XSS-unsafe elements/attributes, even with permissive sanitizers (MDN).
• Do not re-parse serialized HTML with innerHTML (mutation XSS risk, MDN).
• Use setHTMLUnsafe() only when you explicitly need unsafe HTML (MDN).
• Related: getHTML(), innerHTML, insertAdjacentHTML(), JavaScript hub.

💡 Best Practices