САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Обновляется!!! Справочник JavaScript

HTML Тег <template>


Пример

Используйте <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> используется в качестве контейнера для хранения некоторого 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>:

<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>
Попробуйте сами »