This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<template>: элемент шаблона контента
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since ноябрь 2015 г..
* Some parts of this feature may have varying levels of support.
HTML-элемент шаблона контента<template> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.
Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента<template> во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.
| Категории контента | Метаданные,основной поток,фразовый контент,элементы поддержки скриптов |
|---|---|
| Допустимый контент | Нет ограничений |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы, которые могут содержатьметаданные,фразовый контент илиэлементы поддержки скриптов. Допускается вкладывать элемент в<colgroup>, у которогоотсутствует атрибутspan. |
| Неявные ARIA-роли | Нет соответствующей роли |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLTemplateElement |
Атрибуты
Элемент может иметьобщие атрибуты.
Однако уHTMLTemplateElementcontentDocumentFragmentcontentDocumentFragment ниже.
Примеры
Начнём с HTML.
<table> <thead> <tr> <td>UPC_Code</td> <td>Product_Name</td> </tr> </thead> <tbody> <!-- данные будут вставлены сюда --> </tbody></table><template> <tr> <td></td> <td></td> </tr></template>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.
Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.
// Убеждаемся, что браузер поддерживает тег <template>,// проверив наличие атрибута content у элемента template.if ("content" in document.createElement("template")) { // Находим элемент tbody таблицы // и шаблон строки var tbody = document.querySelector("tbody"); var template = document.querySelector("#productrow"); // Клонируем новую строку и вставляем её в таблицу var clone = template.content.cloneNode(true); var td = clone.querySelectorAll("td"); td[0].textContent = "1235646565"; td[1].textContent = "Stuff"; tbody.appendChild(clone); // Клонируем новую строку ещё раз и вставляем её в таблицу var clone2 = template.content.cloneNode(true); td = clone2.querySelectorAll("td"); td[0].textContent = "0384928528"; td[1].textContent = "Acme Kidney Beans 2"; tbody.appendChild(clone2);} else { // Иной способ заполнить таблицу, потому что // HTML-элемент template не поддерживается.}Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью #"ловушка_documentfragment" >
ЛовушкаDocumentFragment
DocumentFragment не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.
Рассмотрим следующие HTML-разметку и JavaScript-код:
HTML
<div></div><template> <div>Click me</div></template>JavaScript
const container = document.getElementById("container");const template = document.getElementById("template");function clickHandler(event) { event.target.append(" — Clicked this div");}const firstClone = template.content.cloneNode(true);firstClone.addEventListener("click", clickHandler);container.appendChild(firstClone);const secondClone = template.content.firstElementChild.cloneNode(true);secondClone.addEventListener("click", clickHandler);container.appendChild(secondClone);Результат
В переменнойfirstClone у нас экземпляр (клон)DocumentFragment, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменнойsecondClone у нас экземпляр (клон)HTMLDivElement
Спецификации
| Specification |
|---|
| HTML # the-template-element |
Совместимость с браузерами
Смотрите также
- Веб-компоненты:
<slot>(и устаревший:<shadow>) - Использование шаблонов и слотов