Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// BAD: 100 DOM insertions = 100 reflows const $ul = $("ul"); data.forEach(item => $ul.append(`<li>${item.name}</li>`)); // GOOD: one insertion $ul.append(data.map(item => `<li>${item.name}</li>`).join("")); // BETTER: DocumentFragment (zero jQuery overhead) const frag = document.createDocumentFragment(); data.forEach(item => { const li = document.createElement("li"); li.textContent = item.name; frag.appendChild(li); }); document.querySelector("ul").appendChild(frag);
Result
Open