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.

---

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.

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.

Answer 2

I actually like a combination of both: createElement for the outer element so you won't be removing any event handlers, and innerHTML for the content of that element, for convenience and performance. For example:

var strong = document.createElement('strong');
strong.innerHTML = 'Hi';
document.getElementById('theEl').appendChild(strong);

Of course, this technique is more useful when the content of the thing you're adding is more complex; then you can use innerHTML normally (with the exception of the outer element) but you're not removing any event listeners.

Answer 3

1. What is the best way to do? One is a single line, another is about five lines.

It depends on context. You probably want to use innerHTML sparingly as a rule of thumb.

2. What is the performance aspect?

DOM manipulation significantly outperforms innerHTML, but browsers seem to keep improving innerHTML performance.

3. What is the right way or best practise?

See #1.

4. Is there any difference between the codes as a whole?

Yes. The innerHTML example will replace the contents of the existing element, while the DOM example will put the new element next to the old one. You probably meant to write mydiv.appendChild(strong), but this is still different. The existing element's child nodes are appended to rather than replaced.

Answer 4

What did you mean by best? In just one DOM operation everything is good and shows the same performance. But when you need multiple DOM insertion, things go diferently.

Background

Every time you insert DOM node, the browser render new image of the page. So if you insert multiple child inside a DOM node, the browser renders it multiple times. That operation is the slowest that you will see.

The solution

So, we need to append most child at once. Use a empty dom node. The built in is createDocumentFragment();

var holder = createDocumentFragment();
// append everything in the holder
// append holder to the main dom tree

The real answer

If in the case is that you described, I would prefer the shortest solution. Because there is no performance penalty in one dom operation