jQuery Add Elements Dynamically: Performance Tip

Tweet

jQuery provides several ways of adding elements dynamically into an already existing element. Some methods are: before(), insertBefore() after(), insertAfter(), append, appendTo, prepend, prependTo and so on.

A couple of days ago, I had shared a tip on how jQuery Event Delegation Improves Performance. In this short article, I will share a quick performance tip while using jQuery.append() which inserts content at the end of the interior of each matched element.

Here’s a basic piece of code that appends a new paragraph element into a div (container). We are assuming that the content to be inserted has been fetched dynamically.

$('.container').append('<p>Lorem ipsum dolor sit amet</p>');

Now this code works good if the number of elements to be inserted were few. But let’s say if were to insert hundreds on new elements using jQuery append, how will this piece of code perform? Let’s first see what developers usually tend to do while inserting a large of elements and how it impacts performance.

First let’s declare some HTML with an existing container element and to display the time taken while adding new elements to this container element

Now when generating a number of elements on the fly, developers usually tend to write a loop and drop this code inside the loop.

var start = new Date().getTime();
for(var cnt=0; cnt < 200; cnt++){
         $('.container').append('<p>Lorem ipsum dolor sit amet</p>');
}
var timeElapsed = new Date().getTime() - start;
$('#timetaken').html('Time taken: ' + timeElapsed + ' milliseconds');

Note the time taken to add new elements this way

Now using a simple technique, we can improve performance by around 300%. Instead of calling the jQuery function each time the loop iterates, first create a variable that holds all the new elements and then add this variable string outside the loop. Here’s how

var start = new Date().getTime();
var str = '';
for(var cnt=0; cnt < 200; cnt++){
     str += '<p>Lorem ipsum dolor sit amet</p>';
}
$('.container').append(str);
var timeElapsed = new Date().getTime() - start;
$('#timetaken').html('Time taken: ' + timeElapsed+ ' milliseconds');

As you can see, we used a variable called str which holds all the new elements. We then made a single jQuery call to add the new elements to the container element.

$('.container').append(str);

This way, we are not calling the jQuery function on each loop, which in turn runs a set of code and checks to complete the operation. Imagine doing this for every loop!

Result: Just 12 milliseconds.



Live Demo:

Slow Performing Code
Fast Performing Code

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.