Thẻ <template> HTML
Thí dụ
Sử dụng <template> để giữ một số nội dung sẽ bị ẩn khi tải trang. Sử dụng JavaScript để hiển thị nó:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</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êm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <template>được sử dụng như một vùng chứa để giữ một số nội dung HTML bị ẩn khỏi người dùng khi tải trang.
Nội dung bên trong <template>có thể được hiển thị sau đó bằng JavaScript.
Bạn có thể sử dụng <template>thẻ nếu bạn có một số mã HTML muốn sử dụng nhiều lần, nhưng không phải cho đến khi bạn yêu cầu. Để thực hiện việc này mà không cần<template> thẻ, bạn phải tạo mã HTML bằng JavaScript để ngăn trình duyệt hiển thị mã.
Hỗ trợ trình duyệt
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Thuộc tính toàn cầu
Thẻ <template>hỗ trợ Thuộc tính chung trong HTML .
Các ví dụ khác
Thí dụ
Điền vào trang web với một phần tử div mới cho mỗi mục trong một mảng. Mã HTML của mỗi phần tử div nằm bên trong phần tử mẫu:
<template>
<div class="myClass">I like: </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í dụ
Kiểm tra hỗ trợ của trình duyệt cho <template>:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>