it is understood that for simple ops like this, manually assemble DOM is okay. But I am still a bit surprised that no one mentioned jquery templating.
see details from this link: Jquery Template, With below contents cited there.
The plugin parses a template using data attributes to populate the
data. Simply pass in a JavaScript object, and the plugin does the
rest.
An example template is below:
<script type="text/html" id="template">
<div data-content="author"></div>
<div data-content="date"></div>
<img data-src="authorPicture" data-alt="author"/>
<div data-content="post"></div> </script>
And to use this do the following:
$("#template-container").loadTemplate($("#template"),
{
author: 'Joe Bloggs',
date: '25th May 2013',
authorPicture: 'Authors/JoeBloggs.jpg',
post: 'This is the contents of my post'
});
Similarly the content of the template could be held in a separate html file without the enclosing script tag, and used like the
following:
$("#template-container").loadTemplate("Templates/template.html",
{
author: 'Joe Bloggs',
date: '25th May 2013',
authorPicture: 'Authors/JoeBloggs.jpg',
post: 'This is the contents of my post'
});
The plugin has a number of data-... attributes that can be used to populate various attributes with the data. There is also the
powerful data-template-bind attribute that accepts a JSON object,
enabling binding to any attribute, or the content of the element.