[removed] Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure? [duplicate]

Answer 1

Neither. Use a library like jQuery, Prototype, Dojo or mooTools because both of these methods are fraught with trouble:

• Did you know that innerHTML on tables for IE is readonly?
• Did you know for the select element it's broken as well?
• How about problems with createElement?

The writers of the major javascript libraries have spent a lot of time and have entire bug tracking systems to make sure that when you call their DOM modifying tools they actually work.

If you're writing a library to compete with the above tools (and good luck to you if you are), then I'd choose the method based on performance, and innerHTML has always won out in the past, and since innerHTML is a native method, it's a safe bet it will remain the fastest.

Answer 2

For a complex problem like this, I usually use the innerHTML methods because they are a)easier to read and modify code-wise b)more convenient to use in loops. As the top post says, they unfortunately fail in IE(6,7,8) on <table>, <thead>,<tbody>,<tr>,<tfoot>, <select>, <pre> elements.

Answer 3

Neither. Use cloneNode.

var div = document.createElement('div');
var millionDivs = [div];
while (millionDivs.length < 1e6) millionDivs.push(div.cloneNode())

Answer 4

1) Create all the elements as innerHTML with string concatenation to add the content.

2) Use createElement, setAttribute and appendChild to create and add each div.

3) compromise. Create all the elements in one go as innerHTML (which avoids a lot of childnode list manipulation slowness), then write the content that changes on each item using data/attribute access (avoiding all that nasty mucking around with having to HTML-escape content). eg. something like:

var html= (
    '<div class="item">'+
        '<div class="title">x</div>'+
        '<div class="description">x</div>'+
    '</div>'
);
var items= [
    {'id': 1, 'title': 'Potato', 'description': 'A potato'},
    {'id': 2, 'title': 'Kartoffel', 'description': 'German potato'},
    // ... 100 other items ...
];

function multiplyString(s, n) {
    return new Array(n+1).join(s);
}

var parent= document.getElementById('itemcontainer');
parent.innerHTML= multiplyString(html, items.length);
for (var i= 0; i<items.length; i++) {
    var item= items[i];
    var node= parent.childNodes[i];

    node.id= 'item'+item.id;
    node.childNodes[0].firstChild.data= item.title;
    node.childNodes[1].firstChild.data= item.description;
}

Can also be combined with Neall's tip about DocumentFragments.