Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

I am building a web application that will consist of 4 major sections. I will be fetching some data from my own API via AJAX and I am trying to decide on the best way to render that data.

  • On one hand I could create relevant HTML elements on-the-go with Javascript's (createElement) and assign values to it.
  • On the other hand I could create a function that injects the values into a string that contains the HTML code, returns it and then append it.

Which one is considered a better approach nowadays?

share|improve this question

closed as off-topic by John C, Al E., Alex, Jacob Jan Tuinstra, ChrisF Nov 7 '13 at 22:56

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "It is a question about creating/developing a web application." – John C, Al E., Alex, Jacob Jan Tuinstra, ChrisF
If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer 1

up vote 0 down vote accepted

Every few years, I read of performance tests people do comparing creating native objects and inserting them vs. adding a big string of HTML. The last time I saw these tests the conclusion was that if it was a few objects, then it was cleaner and faster to create the DOM elements and insert them, but if it was lots of elements, it was cleaner and faster to conjure up the HTML and insert that into a container and let the browser parse it all at once.

The logical explanation was that browsers are pretty finely tuned for parsing HTML and building it into a DOM as fast as possible since that's what they do on the loading of every page so they're actually pretty good at handling a string of HTML. Plus, when you give them one big block of HTML, they can more efficiently insert everything at once rather than you inserting lots of individual elements.

I don't think there's really one approach that is always better than the other. I use both from time to time and it really depends upon the situation. I tend to choose whichever one makes my code seem simpler and clearer.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.