demo · v148

Method Cookbook

One input, one target, every method side-by-side. Pick an input HTML payload, click run, and see how each of the new methods reshapes the target element relative to the others. The Unsafe variants get a red border so you can tell at a glance which ones skip the sanitiser.

Target structure: Each card starts from the same scaffold: <p>Before</p> <span class="target">Target</span> <p>After</p>. The highlighted span is what gets passed to each method.
Warning: the Unsafe variants skip the HTML Sanitizer. The <script> tag in the input below WILL execute on those methods — that's the whole point of the demo.

about the methods

The renewed API exposes six positional methods on Element plus their Unsafe variants. All six accept either a string or a TrustedHTML. All six accept an optional options bag with sanitizer and parser fields.

// new
element.setHTML(html, options);              // replace inner contents
element.appendHTML(html, options);            // append inside, at end
element.prependHTML(html, options);           // prepend inside, at start
element.beforeHTML(html, options);            // insert outside, before
element.afterHTML(html, options);             // insert outside, after
element.replaceWithHTML(html, options);       // swap the element out

// Unsafe variants skip the sanitizer; runScripts default differs.
element.setHTMLUnsafe(html, options);
// ... etc

// Streaming variants (see the other demo):
const sink = element.streamHTMLUnsafe();      // WritableStream
fetch(url).then(r => r.body.pipeThrough(new TextDecoderStream()).pipeTo(sink));

see also

implementation reference

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