document.createDocumentFragment for Batch DOM updates

Kunal Singh

Sep 11, 2024

const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
const li = document.createElement("li");
li.textContent = browser;
fragment.appendChild(li);
});

element.appendChild(fragment); // Mutates the DOM only once
+

Check my latest Blog Post

How to Publish Your First npm Package: Creating Rainbow Highlight with Utilities

Read Now
Oh My Gawwdd!!!!!!!

Wow you have been viewing my site since 20 seconds!

+
+