HTML <template> 标签

Định nghĩa và cách sử dụng

<template> thẻ làm khay chứa để ẩn một số nội dung HTML khi trang web được tải.

<template> nội dung bên trong có thể được hiển thị bằng JavaScript sau này.

Nếu bạn có một đoạn mã HTML mà bạn muốn lặp lại nhưng chỉ hiển thị khi cần, bạn có thể sử dụng <template> thẻ. Nếu không có <template> thẻ, bạn cần tạo mã HTML bằng JavaScript để ngăn trình duyệt hiển thị mã đó.

Mô hình

Ví dụ 1

Sử dụng <template> Để lưu trữ một số nội dung sẽ được ẩn khi trang web được tải. Và hiển thị nó bằng JavaScript:

<button onclick="showContent()">Hiển thị nội dung ẩn</button>
<template>
  <h2>Cây cối</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Thử ngay

Ví dụ 2

Điền trang web bằng một div mới cho mỗi mục trong mảng. Mã HTML của mỗi div được đặt trong phần template:

<template>
  <div class="myClass">Tôi thích: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  var temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  for (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

Thử ngay

Mẫu 3

Kiểm tra trình duyệt hỗ trợ <template> Hỗ trợ:

<script>
if (document.createElement("template").content) {
  document.write("Your browser supports template!");
}
  document.write("Your browser does not supports template!");
}
</script>

Thử ngay

Thuộc tính toàn cục

<template> Thẻ còn hỗ trợ Thuộc tính toàn cục trong HTML.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt hỗ trợ tính năng đầu tiên hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0