Adding DOM Elements, what is the Right Way?

Question

This question might be stupid, or basic.

Can someone explain which is the best method in adding DOM elements. We have these two ways of adding DOM elements.

Scenario: Need to add <strong>Hi</strong> inside an existing <div id="theEl"></div>.

1. By editing the HTML inside them.

   document.getElementById("theEl").innerHTML = '<strong>Hi</strong>';
   

2. By using document.createElement().

   var hi = document.createTextNode("Hi"),
   strong = document.createElement("strong");
   strong.appendChild(hi);
   mydiv = document.getElementById("theEl");
   document.body.insertBefore(strong, mydiv);
   

Questions

1. What is the best way to do? One is a single line, another is about five lines.
2. What is the performance aspect?
3. What is the right way or best practise?
4. Is there any difference between the codes as a whole?

If at all this question is not making sense, please let me know, I will be glad to close this or even remove this. Thanks.

---

Update

For the close voter, this is not going to be a duplicate of that question. One thing I just noted is, using createElement() preserves the event handlers attached to the element. Even though that's a good point, any kind of basic web page, too has jQuery in them, which provides delegation and such stuff that allow me to have the event attached to the element even after change in HTML.

---

Guys, please be cool on close votes. Kind of a research.

Answer 1

There is no "best" or "best practice". They are two different methods of adding content that have different characteristics. Which one you select depends upon your particular circumstance.

For creating lots and lots of elements, setting a block of HTML all at once has generally shown to be faster than creating and inserting lots of individual elements. Though if you really cared about this aspect of performance, you would need to test your particular circumstance in a tool like jsperf.

For creating elements with lots of fine control, setting classes from variables, setting content from variables, etc..., it is generally much easier to do this via createElement() where you have direct access to the properties of each element without having to construct a string.

If you really don't know the difference between the two methods and don't see any obvious reason to use one over the other in a particular circumstance, then use the one that's simpler and less code. That's what I do.

In answer to your specific questions:

1. There is no "best" way. Select the method that works best for your circumstance.
2. You will need to test the performance of your specific circumstance. Large amounts of HTML have been shown in some cases to be faster by setting one large string with .innerHTML rather than individually created an inserting all the objects.
3. There is no "right way" or "best practice. See answer #1.
4. There need be no difference in the end result created by the two methods if they are coded to create the same end result.