Best way to create large static DOM elements in JavaScript?

Question

I have many elements that one of my JS widgets needs to create and add to the DOM often. They never change.

So one option would be to store the HTML itself as a stri

Answer 1

Detailed analysis of 3 commons ways of creating DOM in JS and the best approach.

I will provide 3 ways to create large DOM and their pros and cons, and of-course the most optimized way for large DOM creation and why. Bottom line is while creating DOM in js, native JS and DOM methods are your friend, don't use Jquery unless there is no other way(which is unlikely).

Test Data for comparison: Created 400 rows with 5 columns and appended to DOM. testData is list of objects that you get from backend in json form to create table.

Attached Execution time test result snapshot for different browsers HTML

1st way : String Concatenation (Most Optimized way in terms of performance across browsers)
var tableElementContainer1 = document.getElementById("employeeListContainer1"),
    temptableHolder  = '


    

        
First Name
        
Last Name
        
Title
        
ID
        
Department
    







';
        for(var i=0,len=testData.length; i';
            }
    temptableHolder += '
First Name
Last Name
Title
ID
Department
' + testData[i].lastName + '
' + testData[i].title
                        + '
' + testData[i].id + '
'  + testData[i].department +  '
';
    tableElementContainer1.innerHTML  = temptableHolder ;

Pros: - Fastest execution time across Firefox/Chrome/IE/Safari (3 to 5 millisec across browsers). Measured via both performance.now() and console.time() APIs.

Cons: - When number of columns are more and you need to set lot of attributes then working with strings can get little difficult and less main tenable.

2nd way: Native Js document.createElement()(This is 2nd best approach in terms of performance across browsers)

var tableBody = document.createElement('tbody'),
tableElement2 = document.getElementById("employeeList2"),  
    for(var i=0,len=testData.length; i

Pros: - 2nd fastest execution time across Firefox/Chrome/Safari (5 to 12 millisec across browsers). Measured via both performance.now() and console.time() APIs. - More main tenable than 1st Approach

Cons: - Execution time is more in IE browsers, 90+ millsec

3rd Way: Using Jquery to create DOM (My advise is don't use it)

var tableBody = $(''),
  tableElement2 = document.getElementById("employeeList2"),  
        for(var i=0,len=testData.length; i");
            for(var k in testData[i]){
                rowCell = $("");
                rowCell.append(testData[i][k]);
                tableRow.append(rowCell);
            }
            tableBody.append(tableRow);
        }
tableElement2.append(tableBody);

Pros: - Easy to add attributes/class/styles on elements and is easy to read and main tenable.

Cons: - Worst execution time across all browsers (220 ms to 330 ms), slowest numbers are in IE