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>');

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.

4 comments:

Erik said...: 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?; October 22, 2010 at 2:10 AM
Suprotim Agarwal said...: That was a typo. Corrected. Thanks.; October 22, 2010 at 4:10 AM
Ramiro said...: 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.; January 15, 2011 at 3:34 PM
College said...: Is there any way similar to DOMElement as in php. Could someone post a tutorial for the same?; September 25, 2012 at 9:51 PM