HTML <template> тег

  • Предыдущая страница <td>
  • Следующая страница <textarea>

Определение и использование

<template> Тег используется в качестве контейнера для скрытия некоторых HTML-содержимого от пользователя при загрузке страницы.

<template> Внутреннее содержимое можно использовать позже для отображения с помощью JavaScript.

Если у вас есть HTML-код, который вы хотите повторно использовать, но который нужно отображать только по мере необходимости, вы можете использовать <template> Тег. Если нет <template> Использование тега, вам нужно использовать JavaScript для создания HTML-кода, чтобы предотвратить его отображение браузером.

Пример

Пример 1

Использование <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>

Попробуйте сами

Пример 2

Для каждого элемента массива используйте новый элемент div для заполнения веб-страницы. HTML-код каждого элемента div находится в элементе template:

<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>

Попробуйте сами

Пример 3

Проверьте поддержку браузера <template> поддержка:

<script>
if (document.createElement("template").content) {
  document.write("Ваш браузер поддерживает шаблоны!");
} else {
  document.write("Ваш браузер не поддерживает шаблоны!");
}
</script>

Попробуйте сами

Глобальные атрибуты

<template> Тег также поддерживает Глобальные атрибуты HTML.

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0
  • Предыдущая страница <td>
  • Следующая страница <textarea>