Элемент <template> используется для хранения шаблонов HTML кода, которые можно клонировать и вставлять в документ с помощью скриптов. Обычно используется для элементов с повторяющейся структурой, вроде списков, таблиц и т.д.
Отличие тега <template> от обычных тегов заключается в том, что его содержимое обрабатывается особым образом. Фрагменты кода хранятся на стороне клиента и не отображаются во время загрузки страницы. Для того, чтобы активировать содержимое тега и вставить его в код документа, необходимо использовать скрипты.
Браузер обрабатывает содержимое тега, чтобы убедиться в валидности кода.
Тег <template> может быть расположен практически в любом месте HTML-документа, в тегах <head>, <body> или <frameset>, и может содержать контент, который допускается в этих тегах.
Синтаксис
Тег <template> парный, содержимое пишется между открывающим (<template>) и закрывающим (</template>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<template id="myTemplate">
<p>Содержимое шаблона</p>
</template>
<div id="normalContent">
<p>Обычный параграф.</p>
</div>
<!-- функция JavaScript: Клонирует template и добавляет в обычный контент -->
<button onclick="useTemplate();">Показать содержимое</button>
<script>
function useTemplate() {
var myTemplate = document.getElementById('myTemplate');
normalContent = document.getElementById('normalContent');
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</body>
</html>
Результат
Тег <template> поддерживает глобальные атрибуты.
Поддержка браузера
26+ | 22+ | 8+ | 15+ |