In jQuery, how to efficiently add lots of elements?

Answer 1

To defer rendering, you could try creating a new table without adding it to the DOM like:

var myDisconnectedTable = $('<table></table>')

Then adding your rows to that table:

myDisconnectedTable.append(...)

Then append your table to the div you want it in:

$('#idOfMyDiv').append(myDisconnectedTable)

I don't know that it will help, but it's worth a shot.

Answer 2

Try to avoid using .append in a loop, especially if you're adding a lot of elements. This is always a performance killer.

A better option is to build up a string with the markup and do a single (or as few as possible) .append when your loop is finished.

I see that you're using .data, which makes things a bit more complicated, but another option is to use the metadata plugin to attach structured markup to existing tags.