*** Nobody could answer this question, so another hour of googling and the answer is the Mustache client side template engine.

Hope it helps someone.

I have done a fare bit of googling, about 6 hours worth, I can assure you that this question has never been answered properly.

If I have a JSON load of comments, what is the most elegant, clean, efficient way of returning the html elements to the page using javascript/jQuery?

For example;

jsonComments = {"comments": 
    [{"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"}]

$.each( response.payload, function( i, val ) {
     var comment = "<div class='comments-wrapper'><div>" + username + "</div><div>" + 
location + "</div><div>" + comment + "</div></div>";
    $('#comments').append(comment);
});

that is absolutely hideous, I want that html to be on its own page tucked away somewhere outside of the function. For example, in php I would just use

foreach($comments as $comment) {
   ob_start();
   include('commentsBox.php');
   $comment = ob_get_contents();
   ob_end_clean();
   echo $comment;
}

and inside the commentsBox.php

<?php ?>
<div class="comments-wrapper">
    <div><?=$comment["username"]; ?></div>
    <div><?=$comment["location"]; ?></div>
    <div><?=$comment["comment"]; ?></div>
</div>

Need and tidy and beautiful. How do I achieve the same results with javascript BESIDES using anything to do with node.js, I am not skilled enough to go down that road yet. Is this possible?

Or is there a nice way to do while still using php and javascript together, without like I said adding all the html to a json and returning it that way, cause thats just gross as well.

Thanks