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

Answer 1

Personally, I use innerHTML because it's what I'm used to and for something like this, the W3C methods add a lot of clutter to the code.

Just a possible way to cut down on the number of div's however, are there any reasons you are using spacer elements instead of just editing the margins on the content divs?

Answer 2

altCognito makes a good point - using a library is the way to go. But if was doing it by hand, I would use option #2 - create elements with DOM methods. They are a bit ugly, but you can make an element factory function that hides the ugliness. Concatenating strings of HTML is ugly also, but more likely to have security problems, especially with XSS.

I would definitely not append the new nodes individually, though. I would use a DOM DocumentFragment. Appending nodes to a documentFragment is much faster than inserting them into the live page. When you're done building your fragment it just gets inserted all at once.

John Resig explains it much better than I could, but basically you just say:

var frag = document.createDocumentFragment();
frag.appendChild(myFirstNewElement);
frag.appendChild(mySecondNewElement);
...etc.
document.getElementById('insert_here').appendChild(frag);

Answer 3

As I know, the fastest way is to evade DOM editing as long as it is possible. That mean, it is better to create a big string and then put it into innerHTML. But there is a remark for this: don't make too many operation on big strings, it is faster to use array of strings and then join them all.

Answer 4

Since you mentioned template and clone, you may be interested in this question:

• Deep cloning vs setting of innerHTML: what’s faster?

Another option is to use a DOM wrapper, such as DOMBuilder:

DOMBuilder.apply(window);
DIV({"class": "class0 class1 class3"},
  DIV({"class": "spacer"}),
  DIV({id: "content"}, "content"),
  DIV({"class": "spacer"}),
  DIV({id: "content2"}, "content2"),
  DIV({"class": "class4"}, "content3"),
  DIV({"class": "spacer"}),
  DIV({id: "footer"}, "content3")
);

Personally, if each item is going to need the exact same structure created I would go with the cloning approach. If there's any logic involved in creating the structure into which the content will go, I'd rather maintain something like the above than fiddling about with strings. If that approach turned out to be too slow, I'd fall back to innerHTML.

Answer 5

Depends on what's "better" for you.

Performance

From a performance point of view, createElement+appendChild wins by a LOT. Take a look at this jsPerf I created when I compare both and the results hit in the face.

innerHTML: ~120 ops/sec
createElement+appendChild: ~145000 ops/sec

(on my Mac with Chrome 21)

Also, innerHTML triggers page reflow.

On Ubuntu with Chrome 39 tests get similar results

innerHTML: 120000 ops/sec
createElement: 124000 ops/sec

probably some optimisation take place. On Ubuntu with QtWebkit based browser Arora (wkhtml also QtWebkit) results are

innerHTML: 71000 ops/sec
createElement: 282000 ops/sec

it seems createElement faster in average

Mantainability

From a mantainability point of view, I believe string templates help you a lot. I use either Handlebars (which I love) or Tim (for project which need smallest footprints). When you "compile" (prepare) your template and it's ready for appending it to the DOM, you use innerHTML to append the template string to the DOM. On trick I do to avoid reflow is createElement for a wrapper and in that wrapper element, put the template with innerHTML. I'm still looking for a good way to avoid innerHTML at all.

Compatibility

You don't have to worry here, both methods are fully supported by a broad range of browsers (unlike altCognito says). You can check compatibility charts for createElement and appendChild.

Answer 6

I don't think there's much to choose between them. In the olden days (IE6, FF1.5), innerHTML was faster (benchmark), but now there doesn't seem to be a noticeable difference in most cases.

According to the mozilla dev. docs there are a few situations where innerHTML behaviour varies between browsers (notably inside tables), so createElement will give you more consistency - but innerHTML is usually less to type.