Используйте <template> для хранения некоторого содержимого, которое будет скрыто при загрузке страницы. Используйте JavaScript для его отображения:
<button onclick="showContent()">Показать скрытый контент</button>
<template>
<h2>Цветок</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>
Тег <template> используется в качестве контейнера для хранения некоторого HTML контента, скрытого от пользователя при загрузке страницы.
Содержимое внутри <template> визуализируется позже с помощью JavaScript.
Вы можете использовать тег <template>, если у вас есть какой-то HTML код, который вы хотите использовать снова и снова, но не раньше, чем вы попросите об этом. Сделать это без тега <template>, вы должны создать HTML код с помощью JavaScript, чтобы предотвратить визуализацию кода браузером.
Поддержка браузеров <template>
| Элемент | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Глобальные атрибуты <template>
Тег <template> поддерживает Глобальные атрибуты в HTML.
Еще примеры <template>
Заполните веб страницу одним новым элементом div для каждого элемента в массиве. HTML код каждого элемента div находится внутри элемента <template>:
<template>
<div class="myClass">Мне нравится: </div>
</template>
<script>
var myArr = ["Ауди", "БМВ", "Форд", "Хонда", "Ягуар",
"Ниссан"];
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("Ваш браузер поддерживает шаблон!");
} else {
document.write("Ваш браузер не поддерживает шаблон!");
}
</script>
Попробуйте сами »