dochunk

by pj_js15

HTML

<div>Total Elements Inserted: <span id="progressCntr"></span></div>
<ul id="container"></ul>

CSS

#container li {list-style-type: none;}

JavaScript

function insertElements(num) {
    var totalCntr = 0;
    var chunkSize = 1000;
    var parent = document.getElementById("container");
    var progress = document.getElementById("progressCntr");
    
    function doChunk() {
        var chunkCntr = 0;
        var fragment = document.createDocumentFragment();
        while (chunkCntr < chunkSize && totalCntr < num) {
            var li = document.createElement("li");
            li.innerHTML = "<div><input value='" + totalCntr + "'/></div>";
            fragment.appendChild(li);
            ++totalCntr;
            ++chunkCntr;
        }
        parent.appendChild(fragment);
        progress.innerHTML = totalCntr;
        if (totalCntr < num) {
            setTimeout(doChunk, 0);
        }
    }    
    // start the whole thing
    doChunk();
}

insertElements(100000);