Creating Dom elements in JavaScript/jQuery (table,div,span) using different techniques, their comparison based on performance and memory management

How Do i? Create Dom elemens in JavaScript/jQuery (table,div,span) using different techniques, their comparison based on performance and memory management.

This is a 5 part article which takes you from different techniques to comparison of these techniques. It sounds like a long journey but nature of this article made me to go so long. Even though i skipped many explanations to save space and try to wind up things, i still end up this 5 part series.


Part no.1 Introduction

Part no.2 Test no.1

Part no.3 Test no.2

Part no.4 Test no.3,4

Part no.5 Comparison, Result and Conclusion

In many cases we have to create Dom elements (table, div, span, etc) in JavaScript. It could be due to the fact that we have to consume a web service and display data in tabular form. Or update a tabular record by calling an Ajax routine.
There could be many ways to achieve this but the most used form of creating Dom elements are of using the magic strings.

var div="<div>Operation Completed </div>";
document.getElementbyId('dvMain').innerHTML=div;

This is very easy way to create a Dom element. It does not hurt performance and there is not a lot of memory consumption. But the fact that it’s not the right way of doing such thing remains. There is one better way of doing this

var element=createElement("div");
element.innerHTML="Operation Completed";
var insertBeforeElement=document.getElementById('dvMain');
document.body.insertBefore(element,insertInside);

doing so requires a lot of effort especially when it comes to built tables. Cross browser compatibility came into action and it takes a lot of time to make cross browser java scripting. This could be answered by using some cross browser library e.g. jQuery, YUI,mooTools. Syntax for such operation in jQuery would be like

var element=$("<div></div>").text("operation completed");
$('#dvMain').append(element);

The above syntax is short and result is cross browser. Above technique uses the createElement under the hood to generate the elements. For more information please check the jQuery core library reference.

Then there comes the question of performance. If we are not achieving performance or saving memory by the right technique why we are considering this as a better technique? At the end things comes to response time and memory management.
I have created a test pattern to check memory management and responsiveness. I have a JSON object which is an array of object. I will display this object in tabular form by using a generic table creator method and then I will try to extend this method to support more operations like doing an operation when a data is bound to an array.

I will generate about 100 tables to check the responsiveness and then I will use the chrome browser tab management for memory in both cases. Time logging will be done by taking the start time and end time difference.

I have 4 tests in all

1. Creating 100 tables using string
2. Creating 100 tables using jQuery
3. Extending test no.1 when row is bounded with a tr and try to manipulate it
4. Extending test no.2 when row is bounded with a tr and try to manipulate it

JSON object that will be used in every example

var jsonData = [
    { 'sr': 0, 'FirstName': 'Ahmed', 'LastName': 'Mushtaq', 'Mobile': '03003333333', 'isActive': false },
    { 'sr': 1, 'FirstName': 'Ali', 'LastName': 'Raza', 'Mobile': '0300123876', 'isActive': true },
    { 'sr': 2, 'FirstName': 'Ghalia', 'LastName': 'Ahmed', 'Mobile': '0300098765', 'isActive': false },
    { 'sr': 3, 'FirstName': 'Shamoon', 'LastName': 'Perez', 'Mobile': '0300123456', 'isActive': true },
    { 'sr': 4, 'FirstName': 'Chaman', 'LastName': 'Nargis', 'Mobile': '0300987789', 'isActive': true },
    { 'sr': 5, 'FirstName': 'Naseer', 'LastName': 'Ali', 'Mobile': '0300777777', 'isActive': true },
    { 'sr': 6, 'FirstName': 'Sunbal', 'LastName': 'khalid', 'Mobile': '03000987653', 'isActive': false },
    { 'sr': 7, 'FirstName': 'Sameer', 'LastName': 'Raja', 'Mobile': '03002345678', 'isActive': true },
    { 'sr': 8, 'FirstName': 'Salat', 'LastName': 'Khair', 'Mobile': '03008888888', 'isActive': false },
    { 'sr': 9, 'FirstName': 'Shazia', 'LastName': 'Manzoor', 'Mobile': '03003333333', 'isActive': true },
    { 'sr': 10, 'FirstName': 'Shabeer', 'LastName': 'Ali', 'Mobile': '03000987657', 'isActive': false },
    { 'sr': 11, 'FirstName': 'Shoukat', 'LastName': 'Aziz', 'Mobile': '03002345679', 'isActive': true },
    { 'sr': 12, 'FirstName': 'Rizwan', 'LastName': 'Ahmed', 'Mobile': '030000000000', 'isActive': true },
    { 'sr': 13, 'FirstName': 'Jamsheed', 'LastName': 'Junaid', 'Mobile': '03001111111', 'isActive': true}];

It has 14 rows 0 to 13 indexed.

Part no.2