Using an HTML snippet for a template in JavaScript (jQuery)

Question

I currently am working on a little app that requests user info from my server and displays them using a special template.

At first, I just hardcoded the little snippet in jQuery:

 $("<li><div class='outer'><table><tr><td rowspan=2 class='imgcontainer'><img class='thumb'/></td><td><span class='username'/></td></tr><tr><td><span class='name'/></td></tr></table></div></li>")

I clone it several times.

It's ugly and I want it to have syntax highlighting and whatnot, so it would be better for me to have it in the HTML file itself.

Also, it will make merges easier so somebody can just change a line or two.

Is there a pattern for this? Am I OK putting it in the HTML file that I include this JS in (there's only one), and making it hidden using CSS.

The third option I thought of is just creating a separate HTML file and having jQuery request that from the server to keep it separate. Is this technique used much?

Also, is there any term I can use to describe what I'm doing? (It's harder to ask a question for a concept I don't know the name for)

Answer 1

I gave a similar answer on SO earlier today. What you are looking for is called micro-templates. John Resig posted this on his blog. Essentially you can get a json dataset and apply a template to the data to create html and update the DOM.