Question

There is a page showing a list of objects (e.g. books).
This list can programmatically increase through client-side interaction.
Which is a good way to create new “books” in the DOM?

I’d like to create an invisible stub of the object in the DOM and then clone it n-times, each time editing proprieties (e.g. like book’s title and thumb).

Which is the best practice?

Performance are not the main focus. Code manutenibility and simplicity is my focus.
I already use jQuery.

Answer 1

Avoid “clones” and use a client-side templating solution like Mustache or Handlebars. Load your templates (preloaded in variables, via AJAX, whatever), cache them (in objects, arrays, variables, whatever) for reuse then build them via jQuery:

//the data
var data = {
    text : 'foo'
}

//HTML template string
var templateString = '<div><span>{{text}}</span></div>';

//render contents to template
var templateWithData = Mustache.render(templateString,data);

//build using jQuery
//should now be a div that has a span that contains foo
var newElement = $(templateWithData);