Best way to generate complex html hierarchy in jQuery/JS

Question

I am making web application, in which a lot of content generated from json in JS. I don't know how it's done right, so I just generate complex html fragments like a strings. It does't seems the best way, because it loose a lot of good things plain html has: syntax highlighting, tabulation, plus symbol after every line:

 $('#chatlist').append(
 "<div class='chatlist_cell'>" +
 "<div class='chatlist_cell_inner'>" +
 "<div style='float: left;'>" +
 "<img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>" +
 "</div>" +
 "<div style='float: left; padding-left: 10px;'>" +
 "<div class='chatlist_title'>" + title + "</div>" +
 "<div class='chatlist_text'>" + fromUserString + message.text + "</div>" +
 "</div>" +
 "</div>" +
 "</div>"
 )

Today I try the same with jQuery, but it's even worse. Much more complicated to understand.

 $('#chatlist').append(
 $('<div />').addClass('chatlist_cell').append(
 $('<div />').addClass('chatlist_cell_inner').append(
 $('<div />').css('float', 'left').append(
 $('<img />').addClass('chatlist_avatar').attr('src','/images/ui/user_placeholder.svg')
 )
 ).append(
 $('<div />').css({'float': 'left', 'padding-left': '10px'}).append(
 $('<div />').addClass('chatlist_title').text(title),
 $('<div />').addClass('chatlist_text').text(message.text)
 )
 )
 )
 )

Is there any better way in JS/jQuery? And if not, is there any other tools?

• CD..: developer.mozilla.org/en-US/docs/Web/HTML/Element/template, developer.mozilla.org/en-US/docs/JavaScript_templates
• JoshStrange: @CD.. That isn't supported on IE or mobile browsers AFAICT.

Answer 1

If you are not willing/able to use a full-fledged JS framework (no problem with that) you may want to look into underscore/lodash templates which is pretty lightweight and saves you from writing code to modify the dom into every possible state. You just outline how your data should be rendered and then just re-render it if you data changes. Note this should not be used for "web app" type apps as JS frameworks are much more suited to that job (React/Flow, Angular, Backbone, Ember, etc) but for generating HTML for small or rarely changing interfaces lodash is very nice.

Example:

From your code:

<script id="myTemplate" type="text/template"> 
 <div class='chatlist_cell'>
 <div class='chatlist_cell_inner'>
 <div style='float: left;'>
 <img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>
 </div>
 <div style='float: left; padding-left: 10px;'>
 <div class='chatlist_title'><%=title%></div>
 <div class='chatlist_text'><%=fromUserString%> <%=message.text%></div>
 </div>
 </div>
 </div>
</script>
<script>
 $(function() {
 var myTemplate = _.template($('#myTemplate').html());
 function addNewMessage(title, message, fromUserString) {
 var html = myTemplate({
 title: title,
 message: message,
 fromUserString: fromUserString
 });
 $('#chatlist').append(html);
 }
 addNewMessage("myTitle", {text: "myText"}, "JoshStrange:");
 });
</script>

JSFiddle