HTML Editor - Edit Your Source Code Online

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">
            
        </ul>
        <button id="add-items">Add 100 Items</button>
    </div>

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>