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">



<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title></title>


<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>



<script type="text/javascript">


$(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>


<form id="form1" runat="server">


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

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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?

Suprotim Agarwal said...

That was a typo. Corrected. Thanks.

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.

College said...

Is there any way similar to DOMElement as in php. Could someone post a tutorial for the same?