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!