The .append() method is perhaps the most misused of all jQuery methods. While an extremely useful and easy method to work with, it dramatically affects the performance of your page. When misused, the .append() method can cripple your JavaScript code's performance. When used well, it'll keep your script humming along.

Here is a typical example of append misuse:

[js]var arr = reallyLongArray; $.each(arr, function(count, item) { var newTd = $('').html(item).attr('name','pieTD'); var newTr = $(''); newTr.append(newTd); $('table').append(newTr); });[/js]

Ran Once: Profile (308.697ms, 17861 calls, Firefox 3.06)

Ran in a for loop 100 times: Profile (51782.295ms, 1805100 calls)

If you're coming from Prototype to jQuery, chances are this looks quite natural to you. It's the way that Prototype does node creation/insertion, but with a little bit of jQuery chaining thrown in. Let's see how we can improve this.

' + item + '

[js]var arr = reallyLongArray; $.each(arr, function(count, item) { var newTr = ''; $('table').append(newTr); });[/js]

Ran Once: Profile (107.458ms, 3991 calls, Firefox 3.06)

Loop of 100: Profile (21641.336ms, 399100 calls)

Whoa! Nearly a 3x difference, and much simpler to look at. jQuery can take more then one node at a time and create them all at once. You also don't need to wrap it in $() before appending it. jQuery knows what to do. But wait, there's more!

' + item + '

[js]var arr = reallyLongArray; var textToInsert = ''; $.each(arr, function(count, item) { textToInsert += ''; }); $('table').append(textToInsert);[/js]

Ran Once: Profile (30.792ms, 778 calls, Firefox 3.06)

Loop of 100: Profile (8505.37ms, 77800 calls)

Taking full advantage of the ability of jQuery to insert a chunk of html in a string means only having to call insert once. It's much quicker, with an approximately 9-10x speed increase from the initial algorithm! This will be fast enough for 95% of cases, but for strings with lots of string concatenation… Wait, there's more!

'; textToInsert[i++] = item; textToInsert[i++] = '

[js]var arr = reallyLongArray; var textToInsert = []; var i = 0; $.each(arr, function(count, item) { textToInsert[i++] = ''; }); $('table').append(textToInsert.join(''));[/js]

Credit for this one goes to Michael Geary

Ran Once: Profile (29.724ms, 778 calls, Firefox 3.06)

Loop of 100: Profile (8298.699ms, 77800 calls)

This version is a bit harder to understand, as the html is not in an easy to read format, and the results vary by browser* (see below for further analysis), but in most current and next generation browsers, adding to an array and joining it into a string at the end is quicker then doing string concatenations. So, if you are looping through a large number of string concatenation and need some more speed, you should consider this method. So, now we're done, right? This is as blazingly fast as we can get it? Not quite.

[js]var arr = reallyLongArray; var textToInsert = []; var i = 0; var length = arr.length; for (var a = 0; a < length; a += 1) { textToInsert[i++] = '