HTML <template> Тег
Пример
Элемент шаблона содержит HTML-код без его отображения:
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg">
</template>
Определение и использование
Тег <template> содержит содержимое, скрытое от клиента.
Содержимое внутри тега <template> не будет визуализировано.
Содержимое может быть видимым и визуализированным позже с помощью JavaScript.
Используйте тег <template>, если у вас есть HTML-код, который вы хотите использовать снова и снова, но не до тех пор, пока вы не попросите его. Для этого без тега <template> необходимо создать HTML-код с JavaScript, чтобы предотвратить отрисовку кода браузером.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 9 | 15.0 |
Различия между HTML 4,01 и HTML5
Тег <template> является новым в HTML5.
Глобальные атрибуты
Тег <template> поддерживает Глобальные атрибуты в HTML.
More Examples
Пример
Используйте JavaScript для получения содержимого из шаблона и добавления его на страницу:
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
Пример
Используйте содержимое шаблона для каждого элемента массива:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
//get the template element:
temp =
document.getElementsByTagName("template")[0];
//get the DIV element from the template:
item =
temp.content.querySelector("div");
//for each item in the array:
for (i = 0; i < myArr.length; i++) {
//Create a new
node, based on the template:
a = document.importNode(item,
true);
//Add data from the
array:
a.textContent += myArr[i];
//append the new node wherever you like:
document.body.appendChild(a);
}
}
</script>
Пример
Тестовая поддержка обозревателя для элемента шаблона::
if (document.createElement("template").content) {
/*Code for
browsers that supports the TEMPLATE element*/
} else {
/*Alternative code for browsers that do not support the TEMPLATE element*/
}