0

I was wondering difference between these two techniques used for creating HTML elements. I can't find any difference. I just want to know if there exists a difference or more on any basis (performance or whatever).

The 1st technique using JS inbuilt methods -

var el1 = document.createElement('div');
el1.innerHTML = 'Element Div 1';
var el2 = document.createElement('span');
el2.innerHTML = ' - Span Element';
el2.classList.add('red');
document.body.appendChild(el1);
el1.appendChild(el2);
el1.id = "div";
.red {
    color: red;
    font-size: 13px;
}
#div {
    font-size: 18px;
    color: burlywood;
}

Now the 2nd technique just in one step -

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';
.red {
  color: red;
  font-size: 13px;
}
#div {
  font-size: 18px;
  color: burlywood;
}

Both of these two techniques produce the same result and I can easily manipulate each HTML element created in any of the two ways (and in the same way).

Fiddle1 using 1st technique
 Fiddle2 using 2nd technique

See the above two fiddles, I've used the same code for manipulating the elements. As you'll see both produces the same output. Then what makes them different. 1st one took several lines while the 2nd one just 1 line. Any performance difference between them?? Or any other difference they have which I'm not noticing.

Correct me if I was wrong anywhere.

AND I know the 1st one preserves references to various objects which can be helpful later in the code but I'm not much after that. My main question is - difference between creating elements one by one, adding properties, etc. and the 2nd one which just do it in single step by using String.

Thanks.

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
  • @Saar its not only about `innerHTML` and `createElement` but also of the different methods I used- `appendChild`, `classList.add`.. on the 1st technique VS. none used in the 2nd one.. – Rohit Kumar Sep 27 '15 at 05:58
  • performance is not that different, but with innerHTML, browser parse string (which is fast) and create elements natively. When you use createElement, javascript function call to those, which is extra overhead(but which is fast too), so its mostly negligible as far as I am aware. – YOU Sep 27 '15 at 06:07
  • there is a framework called domly which use createElement, which claim to be a little bit faster than innerHTML, but I think its because they run benchmark domly first, so others hit GC. – YOU Sep 27 '15 at 06:10
  • @YOU and what about if I create `id` or `classList.add` to add class using inbuilt JS methods as in 1st case while in other case created just in the String.. – Rohit Kumar Sep 27 '15 at 06:11
  • it depend how many of those you will add from javascript, and if you run million times, may be different, but most of normal use case not much different. – YOU Sep 27 '15 at 06:31
  • @YOU so it makes difference when used about million times?? well, I'll use it around 100 times on a single page. – Rohit Kumar Sep 27 '15 at 06:33
  • you can see domly benchmark here - http://jsperf.com/domly-vs-the-world, but GC involve a lot of time during benchmarks. – YOU Sep 27 '15 at 06:34
  • one other thing about createElement is you can use on DocumentFragment, which is faster http://ejohn.org/blog/dom-documentfragments/ - that make some better performance for now. but browser are improving anyway. – YOU Sep 27 '15 at 07:00

1 Answers1

3

Second case not only shorter but faster in general.

When you do this:

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';

browser does DOM population in single transaction - it knows exactly that nothing will happen in between multiple insertions.

In first case ( "manual" DOM population ) on each line browsers shall ensure that DOM is in consistent state and fire at least DOM mutation events.

Yes, second case requires parsing but all browsers have very effective HTML parsers.

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • It was faster, anyway .. Last time I looked (or cared) was 5+ years ago. Have more modern empirical evidence? Even with multiple createElement calls the root node is only (well, only *needs* to be) attached once, after all child elements are added, making the same 'transaction' concept apply in that case. – user2864740 Sep 27 '15 at 06:02
  • 1
    I've implemented HTML/CSS/scripting engine by myself ( http://sciter.com ) so have experience with the subject. Think about the following: on each container.appendChild(el1) you need a) drop rendering tree of its container and in some cases up to the root. Invalidate screen area of containers, notify all subscribers that DOM structure has changed, many things happen to be short. As an alternative - populate DocumentFragment and attach it as a whole. But even in this case you will have tasks of, say, finding appendChild method in the prototype chain of Element object, etc. – c-smile Sep 27 '15 at 06:15