Тег <template>

Синтаксис

Описание

Тег <template> (от англ. template ‒ шаблон, образец) используется для объявления фрагментов HTML-документа, которые могут быть клонированы и вставлены в документ с помощью скриптов.

Элемент позволяет хранить содержимое на стороне клиента, которое не должно отображаться при загрузке страницы, но впоследствии может быть заполнено с помощью JavaScript. Он также позволяет повторно использовать этот контент снова и снова. Кроме того, вы также можете изменить контент по своему усмотрению ‒ например, добавить данные из базы данных.

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

Содержимое элемента <template>, в отличие, к примеру, от <script type="неизвестный тип">, обрабатывается браузером. А значит, должно быть корректным HTML.

Атрибуты, которые можно использовать в теге <template>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег template</title>

</head>

<body>
<button onclick="showContent()">Добавить текст</button>
<template>
<h3>Программирование ‒ это просто!</h3>
</template>
<div class="example-template"></div>
<script>
function showContent() {
const temp = document.getElementsByTagName("template")[0];
const clon = temp.content.cloneNode(true);
document.querySelector(".example-template").appendChild(clon);
}
</script>

</body>

</html>

Отображение в браузере: