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() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <template> використовується як контейнер для зберігання деякого вмісту HTML, прихованого від користувача під час завантаження сторінки.
Вміст у <template> можна відобразити пізніше за допомогою JavaScript.
Ви можете використовувати тег <template> якщо у вас є HTML-код, який ви хочете використовувати знову і знову, але не доки ви не попросите. Щоб зробити це без тегу <template> вам потрібно створити HTML-код за допомогою JavaScript, щоб запобігти відображенню коду браузером.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <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>
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>
Спробуйте самі »
Приклад
Перевірте підтримку браузера <template>:
<script>
if (document.createElement("template").content) {
document.write("Ваш браузер підтримує template!");
} else {
document.write("Ваш браузер не підтримує template!");
}
</script>
Спробуйте самі »
