Элемент template
Синтаксис
<template> ... </template>
Описание
Элемент template (от англ. "template" ‒ «шаблон, образец, трафарет») используется для обозначения шаблонных фрагментов HTML-документа, которые с помощью скриптов могут быть клонированы, заполнены соответствующим контентом и вставлены обратно в документ. При этом шаблоны должны представлять собой каркас будущего объекта, то есть некоторую (ветвящуюся) DOM-структуру без всяких текстовых вложений.
Примечание
Любой шаблон, вложенный в данный элемент ни как не влияет на внешний вид страницы, то есть содержимое шаблона на странице просто не отображается. А его клонированная и заполненная с помощью скриптов версия вставляется в документ после самого шаблона. При этом, если после шаблона уже имеется подобная вставка, то новая копия вставляется после неё.
Условия использования
Элемент template может быть использован для обозначения шаблона:
- содержания метаданных (
base,link,meta,noscript,script,style,template,title); - потока контента (
a,abbr,address,area, и т. д.); - структуры
ol,ul,dl,figure,ruby,object,video,audio,table,colgroup,thead,tbody,tfoot,tr,fieldset,select,detailsэлементов; - структуры
menuс атрибутом «type».
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | 4.11.3 The template element |
| 5.1 | 4.12.3. The template element |
| XHTML | |
| 1.0 | |
| 1.1 | |
Атрибуты
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Элемент template</title>
<script src="template.js" type="text/javascript"></script>
</head>
<body>
<h1>Пример использования элемента "template"</h1>
<table border="1">
<caption>Значения цветов</caption>
<thead>
<tr> <th>Название</th> <th>HEX</th> <th>Красный</th> <th>Зелёный</th> <th>Синий</th> </tr>
</thead>
<tbody>
<!-- Создаём шаблон -->
<template id="row">
<tr>
<td><!-- 0:Название --></td>
<td><!-- 1:HEX --></td>
<td><!-- 2:Красный --></td>
<td><!-- 3:Зелёный --></td>
<td><!-- 4:Синий --></td>
</tr>
</template>
<!-- ~~~ -->
</tbody>
</table>
</body>
</html>