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>