HTML - тег <template>
Пример
Используйте <template> для хранения содержимого, которое будет скрыто при загрузке страницы. Используйте JavaScript для его отображения:
<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>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег <template>
используется в качестве контейнера для хранения некоторого HTML-контента, скрытого от пользователя при загрузке страницы.
Содержимое внутри <template>
может быть отображено позже с помощью JavaScript.
Вы можете использовать этот <template>
тег, если у вас есть код HTML, который вы хотите использовать снова и снова, но не раньше, чем вы попросите об этом. Чтобы сделать это без тега<template>
, вы должны создать код HTML с помощью JavaScript, чтобы браузер не отображал код.
Поддержка браузера
Element | |||||
---|---|---|---|---|---|
<template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Глобальные атрибуты
Тег <template>
поддерживает глобальные атрибуты в HTML .
Дополнительные примеры
Пример
Заполните веб-страницу одним новым элементом div для каждого элемента массива. HTML-код каждого элемента div находится внутри элемента шаблона:
<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>
Пример
Проверьте поддержку браузера для <template>:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>