55

jQuery Templates have been deprecated for some time now.

I have some data in the form of a JavaScript object that I want to format as HTML and append to the DOM. What's the best way of doing that these days?

  1. Should I build up an HTML string?
  2. Should I create elements via jQuery such as $('<li>',{id:'my-'+Id}).append($('<span>').text(myText)) ?
  3. Is there a replacement or mature substitute for jQuery templates?
mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • 4
    [The API docs](http://api.jquery.com/jquery.tmpl/) are apparently even more deprecated, they say that feature is "in beta". – bfavaretto Dec 27 '12 at 22:58
  • @bfavaretto: Yep. Says [here](https://github.com/jquery/jquery-tmpl) they're not taking it past beta. – mpen Dec 28 '12 at 00:01
  • 2
    Some performance test [results](http://jsperf.com/2dom-manipulation-js-templating-vs-programatic-jquery) for your three options. – sfk Aug 10 '13 at 14:34
  • Apparently I'm not allowed to answer a question that's been marked as a dupe, but if you're already using [lodash](https://lodash.com/docs#template) or [underscore](http://underscorejs.org/#template), you can use their `_.template` functions. It's simple and supports escaping. – mpen Dec 10 '14 at 04:18

5 Answers5

104

This is how I do it in my projects:

Define a template in your HTML:

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

Use string.format to substitute variables:

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template);

string.format:

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

Pretty simple, you can even combine templates.

Community
  • 1
  • 1
sachleen
  • 30,730
  • 8
  • 78
  • 73
  • 6
    How do you escape HTML where necessary? In your example if `{0}` contained a double-quote you just blew up your HTML. – mpen Dec 28 '12 at 00:17
  • 3
    @Mark You could call `escape()`. I'd definitely look for something more robust if I needed to do more than a few small templates. I just put it here as an example of something that might be useful, as it has been to me. – sachleen Dec 28 '12 at 02:13
  • awesome.. one doubt though.. why it needs to be put under – Anoop Isaac Jul 15 '13 at 20:14
  • It doesn't. http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – sachleen Jul 15 '13 at 20:17
  • Tom Gruner has a nice snippet for escaping HTML from mustache.js here http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery – Willem Joosten Oct 04 '13 at 10:01
10

You should definitely try Handlebars and/or Mustache

I tend to use Handlebars but the syntax is quite similar.

Antonio Laguna
  • 8,973
  • 7
  • 36
  • 72
9

Mustache.js is quite good for templating.

https://github.com/janl/mustache.js

Joe
  • 46,419
  • 33
  • 155
  • 245
7

Templates all the way, so much easier than trying to parse the JSON manually. Since I contributed to it, I'm partial to json2html as it doesn't require compiling of the templates AND uses nothing but JSON and JavaScript.

http://json2html.com

informatik01
  • 16,038
  • 10
  • 74
  • 104
Chad Brown
  • 1,627
  • 1
  • 13
  • 22
0

I realy don't like to build html element using javascript so I suggest you to use some template.
You can find a list of templates and a related question here.

I used to use jQuery Templates, it's prety simple but it's no longer actively.

Community
  • 1
  • 1
Ricardo Alvaro Lohmann
  • 26,031
  • 7
  • 82
  • 82