Renewed HTML insertion&streaming methods

concepts

1. Streaming HTML Writer

   Obtain a WritableStream via element.streamAppendHTML() and pipe a Response body directly into it. HTML renders progressively as each chunk arrives, with no manual string accumulation or innerHTML swaps.

2. Positional Insertion Methods

   Use the new element.appendHTML(), element.prependHTML(), element.beforeHTML(), and element.afterHTML() helpers as ergonomic replacements for insertAdjacentHTML. Click-to-compare shows exactly what each call produces.

3. Streaming AI Content

   A simulated AI chat where each response is piped through streamAppendHTML() — HTML chunks render progressively as they arrive. Shows the performance contrast with the old innerHTML accumulation approach.

4. Sanitizer Comparison

   Run the same payload (script tag, onerror, iframe, declarative shadow DOM, form, ARIA-rich) through three pipelines — setHTML(), setHTMLUnsafe(), legacy innerHTML — side-by-side and inspect what each one strips, keeps, and executes.

5. Throughput Bench

   Race innerHTML +=, insertAdjacentHTML, appendHTML, and streamAppendHTML against a tunable payload (chunks × items × delay). The streaming path wins on large incremental payloads because the browser interleaves parse and paint.

6. Server Stream Lab

   Fetch a real chunked HTML endpoint and watch each fragment render as it arrives. Uses native streaming insertion when exposed and falls back to visible incremental parsing so the delivery model remains testable everywhere.

7. XSS Prevention Guide

   Side-by-side comparison of every HTML insertion path: innerHTML, setHTMLUnsafe(), setHTML() with Sanitizer, appendHTML(), and textContent. Fire XSS payloads — script tags, onerror attributes, javascript: hrefs, SVG events — at each method and see exactly what gets stripped versus executed.

8. Migration Tool

   Paste legacy code using innerHTML +=, insertAdjacentHTML, or fetch-then-dump streaming, and receive the Chrome 151 equivalent with appendHTML(), prependHTML(), setHTML(), and streamAppendHTML(). Includes a line-level diff and migration notes explaining each substitution.

why it shipped

Injecting HTML into a live document has long required either the error-prone innerHTML, the verbose insertAdjacentHTML, or a full DOM-parser round-trip. Worse, streaming content chunk-by-chunk forced developers to buffer partial strings until a chunk boundary was safe. The new API surface provides named positional methods with clear semantics, and a WritableStream interface that lets the browser's HTML parser consume bytes incrementally — the same way the initial page load parser works. Sites that stream AI-generated text, live data feeds, or server-sent HTML fragments benefit immediately: the browser can paint each chunk as it arrives without waiting for a complete document or running expensive diff algorithms.

references

• ChromeStatus entry
• Explainer — Declarative Partial Updates (WICG)
• WICG/declarative-partial-updates proposal