Document.createDocumentFragment()

What is it?

It is an object, which is ready to have nodes inserted into it.

let fragment = document.createDocumentFragment();

When to consider using it?

When you need to add a lot of nodes to Document.
Adding them one by one in sequence may result in a lot of calculations, such as adjusting the position of the screen each time(reflow)

For example, when you will add a lot of <li> elements

What's good about it?

Better performance

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry)

Demo