Então, vez após vez, tive a simples necessidade de fazer isso:
1) Encontre um elemento do modelo
2) Copie o elemento
3) Preencha a cópia com novos dados
4) Anexe a cópia como o último irmão do elemento do modelo
Então, eu escrevi um plugin jQuery para fazer exatamente isso.
Dado o seguinte HTML:
<div id="container">
<div class="template" style="display:none;">
<h1 class="header">Header</h1>
<ul>
<li class="line0">Line 0</li>
<li class="line1">Line 1</li>
<li class="line2">Line 2</li>
</ul>
</div>
</div>
Crie e anexe uma cópia do .template ao #container por esta chamada jQuery:
$("#container").copyAndAppend("template", {
"header": "Header from js",
"line0":"Line 0 from js",
"line1":"Line 1 from js",
"line2":"Line 2 from js"
});
Resultará neste HTML:
<div class="" style="display: block;">
<h1 class="header">Header from js</h1>
<ul>
<li class="line0">Line 0 from js</li>
<li class="line1">Line 1 from js</li>
<li class="line2">Line 2 from js</li>
</ul>
</div>