Javascript - Alternative to HTML concatenation

Question

Possible Duplicate:
JavaScript: How should I generate a lot of HTML?

I feel really stupid doing something like this:

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

Isn't there a way to use templates instead of concatenating strings like that? I know there's the option of populating existing elements with JS and changing the display to block when they need to appear, but it seems rather hackish and annoying, especially when using loops.

I'm open to any front-end template/framework suggestions as well.

This question has probably been asked before, but I couldn't find any clues on SO. Any insight would be greatly appreciated.

EDIT:

To clarify, I'd be interested in something like this:

// li_list.haml
%div
   %ul
      - for i in #{range}
         %li i

// app.js
// require li_list.haml with {range: 10}

"a way to use templates"? What do you mean? What problem are you really trying to solve here? — Lightness Races in Orbit, Dec 15 '11 at 17:37
You could create the HTML source code on the server-side instead. That would be more appropriate. — Šime Vidas, Dec 15 '11 at 17:39
JavaScript template engines have been discussed in http://stackoverflow.com/questions/552934/what-javascript-templating-engine-do-you-recommend, for instance. — Jan Pöschko, Dec 15 '11 at 17:42

Adam Rackis · Accepted Answer · 2011-12-15T17:47:42.403

3

You can definitely use templates, but that will require an external library.

Personally I like KnockoutJs, which has templating, two-way binding to the dom, and other goodies. Here's their demo on templating

edited Dec 15 '11 at 17:47

answered Dec 15 '11 at 17:40

Adam Rackis

82,527
56
270
393

+1 for KnockoutJs, and look for the templates section which uses the jQuery template mechanism... – Mike Gleason jr Couturier Dec 15 '11 at 17:43
Isn't [jQuery templates](http://api.jquery.com/category/plugins/templates/) deprecated now? – SliverNinja - MSFT Dec 15 '11 at 17:47
I've heard good things of KO, btw do you know of Backbone has something similar? – Gal Dec 15 '11 at 17:48
@Silver - as I understand it, jQuery templates is deprecated, but Knockout incorporated it into their library – Adam Rackis Dec 15 '11 at 17:49
@sombe - I don't know anything about backbone, sorry. (my guess would be that it's unrelated to KO) – Adam Rackis Dec 15 '11 at 17:50

score 2 · Answer 2 · answered Jun 26 '12 at 16:10

I know it wasn't tagged, but seeing as your question looks to be using it: jQuery has a tmpl plugin listed in their API documentation.

For a non-jquery solution, Jon Resig has a great article about his micro-templating technique.

Finally, if you're simply concatenating a bunch of stuff, arrays work wonders:

Instead of:

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

You could use:

var html,
    i;
html = ['<div><ul>'];
for (i = 0; i < 10; i += 1) {
    html.push('<li>', i, '<li>')
}
html.push('</ul></div>');
$('body').html(html.join(''));

Not a significant difference, but at least you can perform array manipulation.

score 0 · Answer 3 · answered Dec 15 '11 at 17:42

0

Try Prototype Template.

You might also want to try Closure JS templates.

answered Dec 15 '11 at 17:42

demonkoryu

1,247
10
27

Javascript - Alternative to HTML concatenation

3 Answers3