JavaScript Element setHTMLUnsafe() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word SETHTMLUNSAFE

Definition

Element.setHTMLUnsafe() parses HTML into a DocumentFragment, optionally filters it, then replaces the element’s subtree (MDN). It returns undefined. Prefer setHTML() when available — it always strips XSS-unsafe markup.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.setHTMLUnsafe. Start with this line.

JavaScript
element.setHTMLUnsafe(input)
CallWhat it does
element.setHTMLUnsafe(input)Primary signature.
el.setHTMLUnsafe(...)Call with the arguments your case needs.

Built into the browser. Call setHTMLUnsafe(...) on an Element — no import required.

Library declarations
JavaScript
element.setHTMLUnsafe(input)

Parameters

ParameterDescription
inputRequired. TrustedHTML or HTML string
options.sanitizerOptional. Sanitizer, config, or "default"

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Basic Inject (No Sanitizer)

With no options, HTML is injected without filtering (MDN).

JavaScript
const target = document.getElementById("target");
const html = "
Hello world
";

target.setHTMLUnsafe(html);
console.log(target.innerHTML);
// → "<p>Hello <strong>world</strong></p>"
Try It Yourself

How It Works

  1. Pass an HTML string. Demo uses trusted markup only.
  2. Call with no options. No sanitizer runs (MDN).
  3. Subtree is replaced. Parsed nodes become the children.
  4. Security note. Never pass untrusted user HTML this way.

Example 2 — Feature Detect

Only call setHTMLUnsafe when the browser supports it.

JavaScript
const target = document.getElementById("target");
const html = "
Hello safe
";

if (typeof target.setHTMLUnsafe === "function") {
  target.setHTMLUnsafe(html);
} else {
  target.textContent = "setHTMLUnsafe not supported";
}
Try It Yourself

How It Works

  1. Detect the method. Older engines may not have it.
  2. Call when present. Pass only trusted HTML in demos.
  3. Provide a fallback. textContent avoids injection.
  4. Production tip. Prefer setHTML for untrusted content when available.

Example 3 — Prefer setHTML() (MDN)

Use the safe API first; fall back only when you must.

JavaScript
const target = document.getElementById("target");
const html = "
User content
";

if (typeof target.setHTML === "function") {
  target.setHTML(html);                    // prefer (MDN)
} else if (typeof target.setHTMLUnsafe === "function") {
  target.setHTMLUnsafe(html, { sanitizer: "default" });
} else {
  target.textContent = html.replace(/<[^>]*>/g, "");
}
Try It Yourself

How It Works

  1. Try setHTML first. Always strips XSS-unsafe entities (MDN).
  2. Else use default sanitizer. Safer than no filter at all.
  3. Last resort: text-only — avoid raw innerHTML for untrusted input.
  4. Why “Unsafe”? This API does not force XSS-safe stripping.
Compatibility

Browser Support

Element.setHTMLUnsafe() is Baseline 2025 on MDN (newly available since September 2025). Feature-detect in older engines. Sanitizer options may have varying support.

✓ Baseline 2025

Element.setHTMLUnsafe()

HTML inject with optional sanitizer — Baseline newly available.

2025 Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
setHTMLUnsafe() Baseline 2025

Bottom line: Detect typeof el.setHTMLUnsafe === "function". Prefer setHTML for untrusted HTML when available; treat this API as an injection sink.

Frequently Asked Questions

It parses HTML input into a DocumentFragment, optionally filters it, and replaces the element's subtree in the DOM (MDN). Unlike innerHTML, declarative shadow roots in the input are parsed.
No. MDN marks Element.setHTMLUnsafe() as Baseline 2025 (newly available since September 2025). It is not Deprecated, Experimental, or Non-standard.
undefined. There is no return value (MDN).
MDN: almost always, on browsers where setHTML is supported. setHTML always removes XSS-unsafe entities. Use setHTMLUnsafe only for edge cases like declarative shadow roots or when you must allow specific unsafe HTML.
No by default. MDN warns it is an injection sink. Prefer setHTML for untrusted HTML, or TrustedHTML with Trusted Types enforced. Next safest: setHTMLUnsafe with the default sanitizer.
Optional Sanitizer, SanitizerConfig, or the string "default". If omitted, no sanitizer runs and all HTML entities in the input are injected (MDN).

Next: shadowRoot

See how elements expose an attached shadow tree — useful with declarative roots.

shadowRoot tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element setHTML() Method JavaScript Element shadowRoot Property