3

I want to create an HTML section using JavaScript, so I have two options:

  1. I can create HTML elements using createElement() function:

    document.createElement('div');

  2. I can directly create elements like "<div>Test</div>" as a string.

Which one is better in performance?

Ankit Gupta
  • 189
  • 12
  • you can use this service for test purposes: http://jsperf.com/ – Ivan Chernykh Sep 08 '13 at 06:26
  • [Check out this post](http://stackoverflow.com/questions/11550461/when-do-you-use-dom-based-generation-vs-using-strings-innerhtml-jquery-to-gener/11550785#11550785) – Bergi Sep 21 '13 at 17:17
  • Ankit, why did you add the jQuery tag? (jQuery is just a library written in JavaScript). Also, what information is missing in your opinion in my answer? What more would you like to know? – Benjamin Gruenbaum Sep 22 '13 at 14:53
  • 3
    As a warning, please stop editing this question with trivial character edits just to bump it to the front page. If you do this again, we will lock this question from future edits or votes. – Brad Larson Sep 30 '13 at 15:45
  • All right, you didn't listen to me, so I'm locking this for a while. – Brad Larson Oct 01 '13 at 20:32

4 Answers4

4

Using the DOM API directly is much faster since it does not have to invoke the HTML parser.

 var div = document.createElement("div");
 container.appendChild(div);

Is considerably faster than

 container.innerHTML += "<div></div>";

However, in most cases unless you're doing performance sensitive things, use the one that creates more readable code.

Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
  • If you really care about raw data, there are plenty of benchmarks people have created on jsPerf you can google for "innerHTML vs appendChild benchmark jsperf". I have not included such a benchmark intentionally since in 99% of cases reading such benchmarks and acting accordingly is premature optimization. Use whichever makes more readable code and then optimize when you need to. It really boils down to if you see the DOM API an abstraction over HTML or the other way around imo. – Benjamin Gruenbaum Sep 08 '13 at 06:34
  • 1
    You should also have a look at John Resig's findings regarding DocumentFragments: http://ejohn.org/blog/dom-documentfragments/ – aefxx Sep 08 '13 at 07:04
2

Is a bit off topic, but I think is a important point if anyone is going to use innerHTML

This is very wrong:

container.innerHTML = "<div>";
container.innerHTML += "Hello ";
container.innerHTML += "World";
container.innerHTML += "</div>";

If you really need to make up the string, only append it when the html is completed, you don't want to invoke the parser multiple times with incomplete html.

var html;
html = "<div>";
html += "Hello ";
html += "World";
html += "</div>";

container.innerHTML = html;

Another point is that innerHTML will parse everything again and will remove any event handlers attached to the elements inside a container.

container.innerHTML += moreContent; //previous content lost their event handlers

With DOM you don't need to worry about it, only the new content will be parsed.

container.appendChild(moreContent);
Vitim.us
  • 20,746
  • 15
  • 92
  • 109
2

Everytime you call DOM manipulation method, browser have to calculate the relative position and size of all the elements on the page. and render it again. This process is called reflow. An old but still good article on reflow can be found here http://ajaxian.com/archives/browser-reflows-how-do-they-affect-performance .

Now that being said, updating DOM is a costly affair. And it should be used optimally used. What Benjamin mentioned is correct. But if you continue updating the DOM directly it will trigger reflow repeatedly, which might slow down the performance.

What can a be a better approach is to use DocumentFragment. A very quick explanation can also be found by David Walsh.

skeep
  • 940
  • 6
  • 14
-1

From the benchmarks below it seems that innerHtml is considerably faster than using the DOM methods (I tried using Chrome and IE):

http://www.quirksmode.org/dom/innerhtml.html#t10

http://jsperf.com/realistic-innerhtml-vs-appendchild/15

dima.y
  • 31
  • 3
  • please summarize the results in your answer rather than simply linking out from SO. We aim to preserve the usefulness of answers even if the external resource disappears. – Shawn Mehan Oct 14 '15 at 23:13