v152 · DOM

Renewed HTML insertion&streaming methods

Chrome 152 ships a coherent set of new DOM methods for dynamically inserting markup: positional helpers that replace the awkward insertAdjacentHTML, and streaming variants that return a WritableStream so HTML can be piped in chunk-by-chunk as it arrives from the network.

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 152 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