@mkmanning > An even more important performance gain can be had by > not doing string concatenation (I put a caveat about this in the code > comment's also), but build an array of your html and then join the > array; it's siginficantly faster.
Funny that you mention this. In current browser versions it is ~2-4 times faster to do array.join instead of += and in the next gen browsers the difference is close to none until you get to extremely large loops and strings/arrays, around 100,000 or so, where is it about 1.25 times faster in Chrome, 1.6 times in IE8, and twice as fast in webkit. See my recent article and tests for a more comprehensive explanation: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly To summarize, the most significant things you can do to impact append performance: 1) Move the append out of the for loop, and append one long string ~9x-10x faster 2) Append one DOM node instead of a collection of DOM nodes. ~6x faster <tbody><tr></tr><tr></tr><tr></tr></tbody> appends much faster then <tr></tr><tr></tr><tr></tr> <ul><li></li><li></li><li></li></ul> much faster then <li></ li><li></li><li></li></ul> etc... 3) create a long html string instead of smaller nodes and then appending to and adding attributes to them. ~3x faster $(selector).append('<td class="foo" id="something">content</ td>'); instead of $(selector).append($('<td></td>').append("something").addClass ('foo').attr('id','something')); Doing those three generally speeds things up enough, and using += is so much more legible then array.join that I cut my performance gains off there unless I have really long arrays and speed seems to be an actual problem instead of a hypothetical one.
