Insert multiple HTML elements at once with DocumentFragment

When you need to create multiple HTML elements and insert them into the DOM, you can use a document fragment. A document fragment allows you to assemble all elements and insert them all at once. That is more efficient than adding them one by one.

// Create a new fragment
const fragment = document.createDocumentFragment();

const item1 = document.createElement("div");
item1.innerText = "item 1";
fragment.appendChild(item1); // Append a child

const item2 = document.createElement("div");
item2.innerText = "item 2";
fragment.appendChild(item2); // Append another child

// Append all child to the document
// The document fragment will not be part of the DOM
document.body.appendChild(fragment);

// The document fragment is now empty
console.log(fragment.childElementCount); // logs 0