Khái niệm

Tag <template> được sử dụng để định nghĩa một mẫu (template) chứa các phần tử HTML mà bạn có thể tái sử dụng.

Khi tạo một template, các phần tử bên trong nó sẽ không được hiển thị trực tiếp trên trình duyệt, mà chỉ được sử dụng khi cần thiết.

Cách sử dụng

Sau khi bạn đã định nghĩa một template, bạn có thể sử dụng JavaScript để trích xuất nội dung của template và thêm nó vào trong trang web.

Dưới đây là một ví dụ về cách thực hiện điều đó:

<!-- Định nghĩa template -->
<template id="templateId">
  <h1>Tiêu đề bài viết</h1>
  <p>Nội dung bài viết</p>
</template>

<!-- Sử dụng template trong JavaScript -->
<script>
  // Lấy template bằng cách sử dụng id của nó
  const template = document.getElementById('templateId');

  // Tạo một bản sao của template
  const clone = template.content.cloneNode(true);

  // Thêm bản sao vào trong trang web
  document.body.appendChild(clone);
</script>