Thẻ <mẫu> HTML
Ví 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() {
let temp =
document.getElementsByTagName("template")[0];
let clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Hãy tự mình thử »Thêm 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 làm nơi chứa một số nội dung HTML ẩ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 thẻ <template>
nếu bạn có một số mã HTML mà bạn muốn sử dụng đi sử dụng lại, nhưng chỉ nên sử dụng cho đến khi bạn yêu cầu. Để thực hiện việc này mà không cần thẻ <template>
, 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 chung
Thẻ <template>
hỗ trợ Thuộc tính chung trong HTML .
Thêm ví dụ
Ví dụ
Điền vào trang web một phần tử div mới cho mỗi mục trong một mảng. Mã HTML của từng phần tử div nằm bên trong phần tử mẫu:
<template>
<div class="myClass">I like: </div>
</template>
<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
let 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>
Hãy tự mình thử »Ví dụ
Kiểm tra hỗ trợ 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>
Hãy tự mình thử »