Renewed HTML insertion & streaming methods

concepts

1. Method Cookbook

   Side-by-side reference: same input HTML, same target element, see what each method does. Covers setHTML, appendHTML, prependHTML, beforeHTML, afterHTML, replaceWithHTML, plus the Unsafe variants and the legacy options.

2. Streaming vs Sync

   Compare streamHTMLUnsafe() piping a slow fetch into a target element vs the same content delivered as one innerHTML assignment. Watch the streamed version paint progressively while the sync version blocks until the whole body lands.

3. Position Insertion Explorer

   Try each positional method — before(), after(), prepend(), append(), replaceWith() — against a live target element. Paste any HTML and watch it arrive exactly where the method says.

4. Streaming Template Engine

   A live two-pane template editor with {{variable}}, {#if}, and {#each} blocks that updates the rendered preview on every keystroke via setHTMLUnsafe(). A method toggle switches between setHTMLUnsafe(), setHTML() with sanitizer, and innerHTML, with a benchmark showing timing comparison bars for 1,000 updates each.

5. Sanitizer Integration Demo

   Six XSS presets (script tag, onerror attr, onclick, iframe, mixed) run through four insertion methods side-by-side: setHTML(), appendHTML(), setHTMLUnsafe(), and innerHTML. Each panel shows the rendered output, a DOM serialization of what survived, and a sanitized/not-sanitized status badge. A feature matrix covers five dimensions across all four methods.

why it shipped

Dynamic HTML insertion was a graveyard of overlapping APIs. insertAdjacentHTML couldn't sanitise. setHTML always sanitised but couldn't position. createContextualFragment could execute scripts but only into a detached document. The new methods unify all of this: a single set of named methods that compose with the same options object (sanitizer, runScripts, parser), plus streaming versions that return a WritableStream you can pipe a fetch body into directly. Less to learn, fewer corner cases, much safer defaults.

references

• ChromeStatus entry
• WICG explainer: dynamic markup revamped
• Resulting API table (canonical method list)
• html-setters polyfill — the same API in browsers that don't support it yet