Balises de template

    
      <template>
        <!-- Contenu du template -->
      </template>
    
  

    
      <button id="addButton">Add Item</button>
      <ul id="itemList"></ul>
      <template id="itemTemplate">
        <li class="item">This is a new item</li>
      </template>
    
  

    
// On récupère des références aux éléments du DOM que nous allons utiliser
const addButton = document.getElementById('addButton'); // Le bouton "Ajouter"
const itemList = document.getElementById('itemList'); // La liste où ajouter les éléments
const itemTemplate = document.getElementById('itemTemplate'); // Le template de l'élément de liste

// Ajoutons un gestionnaire d'événement au bouton "Ajouter"
addButton.addEventListener('click', () => {
  // On clone le contenu du template d'un élément de liste
  const newItem = itemTemplate.content.cloneNode(true); // true signifie un clonage profond (inclut tous les éléments enfants)

  // On ajoute le nouvel élément à la liste
  itemList.appendChild(newItem); 
});
    
  

    
      <h1>Liste de produits</h1>
      <div id="productList"></div>
      <template id="productTemplate">
        <div class="item">
          <h2 class="title"></h2>
          <p class="description"></p>
          <span class="price"></span>
        </div>
      </template>
    
  

    
// On attend que le DOM soit complètement chargé avant d'exécuter le script
document.addEventListener('DOMContentLoaded', () => {
  // Tableau de données produit
  const products = [
    { title: 'Produit 1', description: 'Description du produit 1', price: '100 €' },
    { title: 'Produit 2', description: 'Description du produit 2', price: '200 €' },
    { title: 'Produit 3', description: 'Description du produit 3', price: '300 €' },
  ];

  // On récupère des références aux éléments du DOM
  const productList = document.getElementById('productList'); // Conteneur de la liste de produits
  const template = document.getElementById('productTemplate').content; // Template de l'élément produit

  // On parcourt le tableau des produits et on crée un élément pour chaque produit
  products.forEach(product => {
    // On clone le template du produit
    const clone = document.importNode(template, true); // true - clonage profond

    // On remplit les données dans le template cloné
    clone.querySelector('.title').textContent = product.title;
    clone.querySelector('.description').textContent = product.description;
    clone.querySelector('.price').textContent = product.price;

    // On ajoute le template rempli à la liste de produits
    productList.appendChild(clone);
  });
});
    
  

    
      <h1>Résultats de l'opération</h1>
      <div id="messageContainer"></div>

      <template id="messageTemplate">
        <div class="message">
          <p class="content"></p>
        </div>
      </template>
    
  

    
document.addEventListener('DOMContentLoaded', () => {
  // On récupère des références aux éléments du DOM
  const messageContainer = document.getElementById('messageContainer'); // Conteneur pour les messages
  const template = document.getElementById('messageTemplate').content; // Template du message

  // Fonction pour afficher un message
  function showMessage(type, text) {
    // On clone le template du message
    const clone = document.importNode(template, true); // true - clonage profond

    // On récupère une référence à l'élément message dans le clone
    const messageDiv = clone.querySelector('.message');

    // On ajoute une classe correspondant au type de message (success ou error)
    messageDiv.classList.add(type);

    // On définit le texte du message
    messageDiv.querySelector('.content').textContent = text;

    // On ajoute le message au conteneur
    messageContainer.appendChild(clone);
  }

  // On appelle la fonction pour afficher des messages
  showMessage('success', 'Opération effectuée avec succès !');
  showMessage('error', 'Une erreur s\'est produite lors de l\'opération.');
});