Dans certains projets, il peut s'avérer pratique de concevoir et d'utiliser des templates en JavaScript sans avoir recours à utiliser des librairies externes.
Voici un exemple simple :
[...] <div id="container"></div> <template id="mon-template"> <div class="element"> <div class="nom"></div> <div class="desc"></div> <div class="prix"></div> </div> </template> [...]
<script> var template = document.querySelector('#mon-template').innerHTML; for (var i = 0; i < 5; i++) { var newElement = document.createElement("div"); newElement.innerHTML = template; newElement.querySelector('.nom').innerHTML = "Produit " + i; newElement.querySelector('.desc').innerHTML = "Super produit incroyable!"; newElement.querySelector('.prix').innerHTML = i + "$"; document.getElementById("container").appendChild(newElement); } </script>
Voici une seconde version, qui utilise cependant jQuery :
<script> var template = $('#mon-template').html(); for (var i = 0; i < 5; i++) { var $template = $(template); $template.find('.nom').text("Produit " + i); $template.find('.desc').text("Super produit incroyable!"); $template.find('.prix').text(i + "$"); $("#container").append($template); } </script>Assez simple, non?
Excelent!