efficiency of cloning dom nodes

Question

I'm building an application where I end up with a fairly long list of repeated elements that need to be configured based on some objects I'm getting via AJAX. I'm thinking about creating one of these elements in html and leaving it hidden on the page and then cloning this element and using jQuery to modify it based on the object I'm getting back (ie set its text, href etc...) From a performance standpoint would this be faster or slower than more traditional dom generation (where I would create the entire element in javascript rather than starting with a cloned element)?

Answer 1

I haven't done this in a while, but the last time I did, using a string that is a template for your HTML fragment, e.g.,

var myVar = '<option value=@VALUE@>@TEXT@</option>';

then doing some token replace to populate it with data, and finally using someElement.innerHTML = myVar, was at least an order of magnitude faster than doing it through more standard DOM manipulation techniques.