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.