I was curious about how to do react-like things myself without relying on innerHTML or, frankly, any dependencies. It ended up quite easy.

First, fragments via document.createDocumentFragment() are pretty magical. They exist in memory and you can construct them as usual, basically creating a micro virtual dom.

Their purpose is to let you build out a substantial amount of changes to a future DOM before actually rendering. This helps you control repaint count, for ex:

That’s 15k repaints reduced to 1.

With this, there should never be any use case for the expensive innerHTML . However, there are times when we must parse strings to HTML. We can still do this.

See createContextualFragment — it will (try to) parse your string into HTML as long as it’s valid. Example:

For fun, I also threw in updating a text node via fragments rather than modifying innerText/textContent.