createElement() vs. innerHTML When to use?
javascript
Solution
Adding to the DOM n times takes n times more time than adding to the DOM a single time. (:P)
This is the logic I'm personally following.
In consequence, when it is about to create, for instance, a SELECT element, and add to it several options, I prefer to add up all options at once using innerHTML than using a createElement call n times.
This is a bit the same as to compare BATCH operation to "one to one"... whenever you can factorise, you should!
EDIT: Reading the comments I understand that there's a feature (DOM DocumentFragment) that allow us saving such overhead and at the same time taking advantage of the DOM encapsulation. In this case, if the performances are really comparable, I would definitely not doubt and chose the DOM option.
Problem
I have some data in a sql table. I send it via JSON to my JavaScript. From there I need to compose it into HTML for display to the user by 1 of 2 ways. - By composing the html string and inserting into .innerHTML property of the holding element - By using createElment() for each element I need and appending into the DOM directly Neither of the questions below gives a quantifiable answer. From first answer in first link, 3rd Reason ( first two reasons stated don't apply to my environment ) Could be faster in some cases Can someone establish a base case of when createElement() method is faster and why? That way people could make an educated guess of which to use, given their environment. In my case I don't have concerns for preserving existing DOM structure or Event Listeners. Just efficiency ( speed ). I am not using a library regarding the second link I provided. But it is there for those who may. Research / Links Advantages of createElement over innerHTML? JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?