Fastest way to programmatically create HTML Elements using jQuery

I stumbled across an interesting answer by Owen and a few others on stackoverflow discussing the fastest way to create HTML Elements using jQuery. Here are some excerpts:

4 possible ways of creating HTML elements (like a DIV) using jQuery are :

var newEle = $(document.createElement('div'));
var newEle = $('<div>');
var newEle = $('<div></div>');
var newEle = $('<div/>');

After performing a test to create HTML Elements using jQuery as Owen suggested, here were the results. I have clubbed all the 4 tests here for better readibility. However you should run each test for every new way of creating elements, individually.

Test

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$(document).ready(function() {

var counter = 5000;

var startTime = new Date().getTime();

// First Test

for (i = 0; i < counter; ++i) {

var newEle = $(document.createElement('div'));

}

var endTime = new Date().getTime();

alert(endTime - startTime);

// Second Test

var counter = 20000;

var startTime = new Date().getTime();

for (i = 0; i < counter; ++i) {

var newEle = $('<div>');

}

var endTime = new Date().getTime();

alert(endTime - startTime);

// Third Test

var counter = 20000;

var startTime = new Date().getTime();

for (i = 0; i < counter; ++i) {

var newEle = $('<div></div>');

}

var endTime = new Date().getTime();

alert(endTime - startTime);

// Fourth Test

var counter = 20000;

var startTime = new Date().getTime();

for (i = 0; i < counter; ++i) {

var newEle = $('<div/>');

}

var endTime = new Date().getTime();

alert(endTime - startTime);

});

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Results:

The fastest way to create an HTML element using jQuery is using :
var newEle = $(document.createElement('div'));

The slowest one was :
var newEle = $('<div></div>');

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

3 Responses to "Fastest way to programmatically create HTML Elements using jQuery"

Erik said...

October 22, 2010 2:10 AM

In the text above you wrote

var newEle = $(document.createElement('div'));

but in the code there is:

var newEle = $(document.createElement('<div>'));

which one is correct?
Suprotim Agarwal said...

October 22, 2010 4:10 AM

That was a typo. Corrected. Thanks.
Ramiro said...

January 15, 2011 3:34 PM

var newEle = $(document.createElement('<div>'));

In your code you loop through the 1st test only 5000 instead of 20000 times as in the other tests.

Still the above is the fastest also when looped 20000 times.