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

Generally, please don't touch DOM too many times. It is a performance killer as you have already observed.

var result="";
for (i=0; i<5000; i++) {
    result+='
Line Item
';
}
$('#collection').append(result);

In this way, you touch DOM only once!

An alternative way is using array.

var result=[];
for (i=0; i<5000; i++) {
    result.push('
Line Item
');
}
$('#collection').append(result.join(""));