ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ
HTML теги. Полный справочник

HTML тег <template> (шаблон)

❮ Prev Полный HTML справочник Next ❯

Пример

Элемент 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.

Больше примеров

Пример

Используйте 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];
  // Получить элемент DIV из шаблона:
  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:

if (document.createElement("template").content) {
  /*Код для браузеров, который поддерживает элемент TEMPLATE*/
} else {
  /*Альтернативный код для браузеров, которые не поддерживают элемент TEMPLATE*/
}
Попробуйте сами »
❮ Prev Полный HTML справочник Next ❯