Programmation Web Avancée

Blogue

Les cours

Utiliser des templates en JavaScript sans librairie externe


Rédigé par , le

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?

Les commentaires sur cet article
Par : Guillaume
2017-02-02 02:01:54

Excelent!

Ajouter votre commentaire
(facultatif)
(facultatif et non divulgé)
Captcha image
Prenez le nombre affiché et faites moins 1.
 
Blog  

Les articles


Pour envoyer une demande d'assistance à l'enseignant, cliquez ici