Кратко
СкопированоТег <template>
– (от английского template – шаблон) используется как контейнер для хранения HTML-кода для дальнейшего использования в JavaScript.
Пример
Скопировано<template> <div class="card"> <h2 class="card__title"></h2> <div class="card__content"></div> </div></template>
<template> <div class="card"> <h2 class="card__title"></h2> <div class="card__content"></div> </div> </template>
Как понять
СкопированоВ <template>
может храниться любая корректная HTML-разметка, в том числе стили и скрипты. Браузер будет проверять HTML-синтаксис, но содержимое тега <template>
не будет отображаться на странице.
Если в шаблоне содержатся скрипты, они не выполнятся, а стили не применятся, пока содержимое шаблона не поместить на страницу.
Для того чтобы использовать содержимое шаблона в документе нужен JavaScript.
Атрибуты
СкопированоК тегу <template>
можно применить все глобальные атрибуты.
Как использовать
СкопированоТег <template>
имеет свойство content
, которое доступно только для чтения. По нему можно получить доступ к содержимому шаблона.
if (document.createElement('template').content) { /* Код выполнится, если браузер поддерживает <template> */} else { /* Нужно придумать что-то другое */}
if (document.createElement('template').content) { /* Код выполнится, если браузер поддерживает <template> */ } else { /* Нужно придумать что-то другое */ }
Наглядный пример
СкопированоИмеем HTML-разметку с контейнером для списка покупок и шаблон элемента списка, завёрнутого в <template>
:
<div> <h2>Список покупок</h2> <ul class="list"> </ul> <template id="template"> <li></li> </template></div>
<div> <h2>Список покупок</h2> <ul class="list"> </ul> <template id="template"> <li></li> </template> </div>
Использование шаблона с помощью JavaScript:
const list = document.querySelector('.list')const template = document.querySelector('#template')// Клонируем содержимое тега <template>const item = template.content.cloneNode(true)// Находим тег <li> и помещаем текст внутрьitem.querySelector('li').textContent = 'Молоко'// Вставляем склонированный контент на страницуlist.append(item)
const list = document.querySelector('.list') const template = document.querySelector('#template') // Клонируем содержимое тега <template> const item = template.content.cloneNode(true) // Находим тег <li> и помещаем текст внутрь item.querySelector('li').textContent = 'Молоко' // Вставляем склонированный контент на страницу list.append(item)
Подсказки
Скопировано💡 В <template>
могут находиться даже те теги, которые в обычной жизни не используются без родительского контейнера, такие как <li>
или <tr>
.
<template> <li></li></template><template> <tr> <td></td> </tr></template>
<template> <li></li> </template> <template> <tr> <td></td> </tr> </template>