jQuery append in loop - DOM does not update until the end

Question

When looping over a large collection and appending it to the DOM, the DOM only refreshes after all items have been appended. Why doesn\'t the DOM update after each app

Answer 1

you need to give back control to the browser every once in a while:

    var current = 0


    function draw() {
        var next = current + 10
        for(var i = current; i < next; i++) {
            $('#collection').append('
Line Item
');
        }
        current = next
        setTimeout(draw, 50);
    }

draw();