v148 · HTML · JavaScript · Declarative Partial Updates

HTML Insertion REPL

Try the new and old HTML insertion methods side by side. Type HTML, pick a method, hit Run — the result lands in the target element. Compare setHTML(), appendHTML(), document.parseHTML() with their legacy equivalents.

Chrome 148 flag: setHTML, appendHTML, and document.parseHTML require Chrome 148 with chrome://flags/#enable-experimental-web-platform-features. The REPL detects what's available and reports it in the log — legacy methods work in all browsers.

HTML input

Method

Output

Output renders here

Log

Ready. Pick a method and hit Run.

Method comparison

element.setHTML() new

Replace all content with sanitized HTML. Direct replacement for innerHTML =. Supports optional Sanitizer config.

element.appendHTML() new

Append sanitized HTML to existing children. Direct replacement for insertAdjacentHTML('beforeend', …).

document.parseHTML() new

Parse HTML string to a Document. Direct replacement for new DOMParser().parseFromString(…). Sanitization built in.

element.streamHTMLUnsafe() new

Returns a WritableStream. Pipe a ReadableStream of HTML chunks into it — content renders progressively.

Sanitizer integration

// setHTML sanitizes by default — script tags are stripped
target.setHTML('<p>Safe</p><script>evil()</script>');
// → <p>Safe</p> (script removed)

// Custom sanitizer config (allow specific elements/attrs)
const sanitizer = new Sanitizer({
  allowElements: ['p', 'strong', 'em', 'a'],
  allowAttributes: { 'a': ['href'] }
});
target.setHTML(untrustedHTML, { sanitizer });

// Unsafe variants bypass sanitization (use only for trusted HTML)
target.setHTMLUnsafe(trustedHTML);
target.appendHTMLUnsafe(trustedHTML);

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗