v153 · html · dom · streaming

Renewed HTML insertion & streaming methods

Chrome 153 adds a coherent set of HTML-string insertion methods to Element — positional variants of before, after, append, prepend, and replaceWith that accept raw HTML strings — plus a streamAppendHTML() method for incrementally inserting HTML from a ReadableStream without blocking the main thread.

at a glance

Shipped in	Chrome 153 (Enabled by default)
Status	Enabled by default
Explainer	WICG/declarative-partial-updates — dynamic markup explainer
Standards position (Firefox)	No signal
Standards position (Safari)	No signal
ChromeStatus	5054329641893888 — Renewed HTML insertion & streaming methods

Source: chromestatus.com/feature/5054329641893888

why it exists

The existing insertAdjacentHTML() method works but is verbose, positional-string-based, and has no streaming counterpart. The innerHTML setter destroys and recreates the full subtree, breaking references and event listeners. Server-side rendering and MPA frameworks that stream HTML fragments (out-of-order streaming, HTMX-style patterns) need a way to append HTML from a fetch() ReadableStream chunk-by-chunk, exactly as the network delivers it, without accumulating the whole string first.

The new methods provide: clean positional shortcuts that replace insertAdjacentHTML, and streamAppendHTML() which accepts a ReadableStream<string> and feeds it to the HTML parser incrementally, yielding control back to the event loop between chunks.

Source: WICG explainer

shape of the API

Positional HTML-string methods on Element:

Method	Inserts
`element.beforeHTML(html)`	HTML string immediately before `element`
`element.afterHTML(html)`	HTML string immediately after `element`
`element.prependHTML(html)`	HTML string as first child(ren)
`element.appendHTML(html)`	HTML string as last child(ren)
`element.replaceWithHTML(html)`	Replaces `element` with parsed HTML

Streaming method:

Method	Signature	Returns
`element.streamAppendHTML(stream)`	`ReadableStream<string>`	`Promise<void>` — resolves when stream closes

All methods parse the HTML in the context of the element's owner document. Script execution behaviour follows the same rules as innerHTML.

Source: WICG explainer — Resulting API

example

// Positional insertion (replaces insertAdjacentHTML)
const list = document.querySelector('#results');
list.appendHTML('<li>New item</li>');
list.prependHTML('<li class="pinned">Pinned</li>');

// Streaming: append HTML as it arrives from the network
const container = document.querySelector('#stream-target');
const response = await fetch('/api/html-fragment');
// response.body is a ReadableStream<Uint8Array>; decode to strings
const textStream = response.body.pipeThrough(new TextDecoderStream());
await container.streamAppendHTML(textStream);
console.log('Stream complete');

// Works well with server-sent HTML updates
async function loadMoreResults(url) {
  const res = await fetch(url);
  await list.streamAppendHTML(
    res.body.pipeThrough(new TextDecoderStream())
  );
}