Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>DocumentFragment Example</title>
</head>
<body>
<div id="list-container">
<h2>Item List</h2>
<ul id="item-list">
<!-- Items will be added here -->
</ul>
<button id="add-items">Add 100 Items</button>
</div>

<script>
const itemList = document.getElementById('item-list');
const addItemsButton = document.getElementById('add-items');

addItemsButton.addEventListener('click', () => {
// Create a DocumentFragment
const fragment = document.createDocumentFragment();

// Add 100 list items to the fragment
for (let i = 1; i <= 100; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Item ${i}`;
fragment.appendChild(listItem);
}

// Append the fragment to the item list
itemList.appendChild(fragment);
});
</script>
</body>
</html>