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




About The Author

Suprotim Agarwal
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?

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?