Question

I’ve done a lot of server-side HTML programming and used a number of different template languages for producing (X)HTML. This part is very clear to me.

But what I’m wondering a bit about is how do people use this in client-side JavaScript programs? I mean, obviously there can be template languages written for JavaScript that work inside the browser – but is that how people normally do it? Or do people just manipulate the DOM directly? Or are there some nice helper libraries most people use?

As an example – let’s say I want a JavaScript application that fetches a list of contact cards from the remote server, returned as a JSON object. Then I want to show this contact cards on the browser side using certain predefined HTML markup, to which I fill in the required fields. How is this normally done?

Answer 1

There are a variety of ways people normally do this:

• Storing the html in a file fetched from the server when you do your ajax call and just inserting it into the DOM
• Getting the dynamic bits of content you want and then assembling all the HTML back on the client side and inserting it into the DOM (this is probably the most common and the one I’d recommend the least)
  • Using a javascript templating language (I’m fairly partial to jquery’s tempest plugin)

There are other solutions too, such as hiding the content to be teplated in a textarea or in html script tags, but I’m not a fan of them as they tend to produce incorrect/invalid markup.