Concept

The <template> tag is used to define a template that contains HTML elements that you can reuse.

When creating a template, the elements inside it will not be displayed directly in the browser, but only used when needed.

Usage

Once you have defined a template, you can use JavaScript to extract the content of the template and add it to your web page.

Here is an example of how to do that:

<!-- Đị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>