Dom : clonage

Le code utilise la balise <template> et le clonage.

JS Bin on jsbin.com Pour en savoir plus.

La balise template existe.

En 2008, J. Resig écrivait un post JavaScript Micro-Templating.

Pour résumer, on ecrit un template sous la forme

1. <script type="text/html" id="user_tmpl">
2.   <% for ( var i = 0; i < users.length; i++ ) { %>
3.     <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
4.   <% } %>
5. </script>

L'appel à une fonction va d'abord transformer grâce aux expression régulières le code puis l'exécuter.
La transformation sera sous la forme :

1. var p=[];

   for ( var i = 0; i < users.length; i++ ) { 

      p.push('<li><a href="' + users[i].url + '">' +  users[i].name + '</a></li>');

   }

   p.join(';');

Depuis, les bibliothèques ont facilité la prise en charge de code répétitif.

Aujourd'hui, la balise <template> existe.

See the Pen PozwqBK by dupont (@dupontcodepen) on CodePen.

JS Bin
Ref (voir exemple).
http://www.w3.org/TR/html5/scripting-1.html#template-contents