jQuery Templates

Using jQuery templates, we can define the out HTML structure using template, create a data source. Then bind the data source to template.
Please go through this site for more details.
http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html

You can find below samples.
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<!--Download tmpl "https://code.google.com/p/my-web-js/downloads/detail?name=jquery.tmpl.min.js&can=2&q="-->
<script src="jquery.tmpl.min.js" type="text/javascript"></script>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
<b>${Name}</b> (${ReleaseYear})
</li>
</script>
<ul id="results"></ul>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$("#movieTemplate").tmpl(movies)
.appendTo("#results");
</script>

Now i am going to change the data source and template...

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<!--Download tmpl "https://code.google.com/p/my-web-js/downloads/detail?name=jquery.tmpl.min.js&can=2&q="-->
<script src="jquery.tmpl.min.js" type="text/javascript"></script>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
<b>{{html Name}}</b>
(<span style="color: Blue"> ${ReleaseYear}</span>) - Director: ${Director}
</li>
</script>
<ul id="results"></ul>
<script type="text/javascript">
var movies = [
{ Name: "The <strong style='color: red'>Red</strong> Violin", ReleaseYear: "1998", Director: "Francois Girard" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
{ Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
$("#movieTemplate").tmpl(movies)
.appendTo("#results");
</script>