Các thẻ template

    
      <template>
        <!-- Nội dung của 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>
    
  

    
// Lấy các phần tử từ DOM để sử dụng
const addButton = document.getElementById('addButton'); // Nút "Thêm"
const itemList = document.getElementById('itemList'); // Danh sách để thêm phần tử
const itemTemplate = document.getElementById('itemTemplate'); // Mẫu phần tử danh sách

// Thêm event listener cho nút "Thêm"
addButton.addEventListener('click', () => {
  // Sao chép nội dung của mẫu phần tử danh sách
  const newItem = itemTemplate.content.cloneNode(true); // true có nghĩa là sao chép sâu (bao gồm tất cả các phần tử con)

  // Thêm phần tử mới vào danh sách
  itemList.appendChild(newItem); 
});
    
  

    
      <h1>Danh sách sản phẩm</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>
    
  

    
// Đợi toàn bộ DOM tải xong trước khi thực thi script
document.addEventListener('DOMContentLoaded', () => {
  // Mảng dữ liệu sản phẩm
  const products = [
    { title: 'Sản phẩm 1', description: 'Mô tả sản phẩm 1', price: '100 USD' },
    { title: 'Sản phẩm 2', description: 'Mô tả sản phẩm 2', price: '200 USD' },
    { title: 'Sản phẩm 3', description: 'Mô tả sản phẩm 3', price: '300 USD' },
  ];

  // Lấy các phần tử từ DOM
  const productList = document.getElementById('productList'); // Container cho danh sách sản phẩm
  const template = document.getElementById('productTemplate').content; // Mẫu phần tử sản phẩm

  // Duyệt qua mảng sản phẩm và tạo phần tử trong danh sách cho mỗi sản phẩm
  products.forEach(product => {
    // Sao chép mẫu sản phẩm
    const clone = document.importNode(template, true); // true - sao chép sâu

    // Điền dữ liệu vào mẫu sao chép
    clone.querySelector('.title').textContent = product.title;
    clone.querySelector('.description').textContent = product.description;
    clone.querySelector('.price').textContent = product.price;

    // Thêm mẫu đã điền vào danh sách sản phẩm
    productList.appendChild(clone);
  });
});
    
  

    
      <h1>Kết quả hoạt động</h1>
      <div id="messageContainer"></div>

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

    
document.addEventListener('DOMContentLoaded', () => {
  // Lấy các phần tử từ DOM
  const messageContainer = document.getElementById('messageContainer'); // Container cho tin nhắn
  const template = document.getElementById('messageTemplate').content; // Mẫu tin nhắn

  // Hàm để hiển thị tin nhắn
  function showMessage(type, text) {
    // Sao chép mẫu tin nhắn
    const clone = document.importNode(template, true); // true - sao chép sâu

    // Lấy phần tử tin nhắn trong clone
    const messageDiv = clone.querySelector('.message');

    // Thêm class ứng với loại tin nhắn (success hoặc error)
    messageDiv.classList.add(type);

    // Đặt văn bản cho tin nhắn
    messageDiv.querySelector('.content').textContent = text;

    // Thêm tin nhắn vào container
    messageContainer.appendChild(clone);
  }

  // Gọi hàm để hiển thị tin nhắn
  showMessage('success', 'Hoạt động thành công!');
  showMessage('error', 'Đã xảy ra lỗi trong quá trình thực hiện.');
});