Etiquetas de plantillas

    
      <template>
        <!-- Contenido de la plantilla -->
      </template>
    
  

    
      <button id="addButton">Add Item</button>
      <ul id="itemList"></ul>
      <template id="itemTemplate">
        <li class="item">Este es un nuevo elemento</li>
      </template>
    
  

    
// Obtenemos referencias a los elementos en el DOM que vamos a usar
const addButton = document.getElementById('addButton'); // Botón "Añadir"
const itemList = document.getElementById('itemList'); // Lista a la que añadiremos elementos
const itemTemplate = document.getElementById('itemTemplate'); // Plantilla de elemento de lista

// Añadimos manejador de eventos al botón "Añadir"
addButton.addEventListener('click', () => {
  // Clonamos el contenido de la plantilla del elemento de lista
  const newItem = itemTemplate.content.cloneNode(true); // true significa clonación profunda (incluyendo todos los elementos hijos)

  // Añadimos nuevo elemento a la lista
  itemList.appendChild(newItem); 
});
    
  

    
      <h1>Lista de productos</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>
    
  

    
// Esperamos a que el DOM esté completamente cargado antes de ejecutar el script
document.addEventListener('DOMContentLoaded', () => {
  // Array de datos de productos
  const products = [
    { title: 'Producto 1', description: 'Descripción del producto 1', price: '100 USD' },
    { title: 'Producto 2', description: 'Descripción del producto 2', price: '200 USD' },
    { title: 'Producto 3', description: 'Descripción del producto 3', price: '300 USD' },
  ];

  // Obtenemos referencias a los elementos en el DOM
  const productList = document.getElementById('productList'); // Contenedor para la lista de productos
  const template = document.getElementById('productTemplate').content; // Plantilla del elemento de producto

  // Iteramos sobre el array de productos y para cada uno creamos un elemento en la lista
  products.forEach(product => {
    // Clonamos la plantilla del producto
    const clone = document.importNode(template, true); // true - clonación profunda

    // Rellenamos los datos en la plantilla clonada
    clone.querySelector('.title').textContent = product.title;
    clone.querySelector('.description').textContent = product.description;
    clone.querySelector('.price').textContent = product.price;

    // Añadimos la plantilla llena a la lista de productos
    productList.appendChild(clone);
  });
});
    
  

    
      <h1>Resultados de la operación</h1>
      <div id="messageContainer"></div>

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

    
document.addEventListener('DOMContentLoaded', () => {
  // Obtenemos referencias a los elementos en el DOM
  const messageContainer = document.getElementById('messageContainer'); // Contenedor de mensajes
  const template = document.getElementById('messageTemplate').content; // Plantilla de mensaje

  // Función para mostrar un mensaje
  function showMessage(type, text) {
    // Clonamos la plantilla de mensaje
    const clone = document.importNode(template, true); // true - clonación profunda

    // Obtenemos referencia al elemento de mensaje dentro del clon
    const messageDiv = clone.querySelector('.message');

    // Añadimos la clase correspondiente al tipo de mensaje (success o error)
    messageDiv.classList.add(type);

    // Establecemos el texto del mensaje
    messageDiv.querySelector('.content').textContent = text;

    // Añadimos el mensaje al contenedor
    messageContainer.appendChild(clone);
  }

  // Llamamos a la función para mostrar mensajes
  showMessage('success', '¡Operación completada con éxito!');
  showMessage('error', 'Hubo un error al realizar la operación.');
});