HTML :: Тег <template>

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

Если браузер поддерживает элемент <template>, то для получения доступа к его содержимому через скрипты следует использовать доступный только для чтения атрибут content.

Синтаксис

	<template>
		...
	</template>		       		
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/template

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>

	<!-- Для оформления используем стили, а не атрибуты -->
	<style>
	
		table, th,td{
		border: 1px solid black;
		padding: 5px;
		}
		
		table{
		border-collapse: collapse
		}
		
	</style>
	
</head>
<body>
	
<table>
	
	<thead>
		<tr>
			<th>Город</th>
			<th>Население</th>
		</tr>
	</thead>
	
	<tbody>
		<!-- Создаем пустой шаблон -->
		<template id="temp">
			<tr>
				<td></td>
				<td></td>				
			</tr>
		</template>
	</tbody>
	
</table>

<!-- Заполним шаблон при помощи JS -->
<script>
	//Заполняем массив данных для таблицы
	var data = [
		{city: 'Минск', population: '1 992 685'},
		{city: 'Гомель', population: '536 938'},
		{city: 'Могилев', population: '383 313'},
		{city: 'Витебск', population: '378 459'},
		{city: 'Гродно', population: '373 547'},
		{city: 'Брест', population: '350 616'}    
   ];
   
   //Находим наш шаблон
   var temp = document.getElementById('temp');
     
   //Заполняем его при помощи цикла
	for(var i=0; i<data.length; i++){
		//Получаем доступ к содержимому шаблона через атрибут content
		//и клонируем его для возможности изменения
		var clone_temp = temp.content.cloneNode(true); 
		//Находим в клоне ячейки таблицы
		var table_cells = clone_temp.querySelectorAll('td');
		//Заполняем ячейки данными
		table_cells[0].innerHTML = data[i].city;
		table_cells[1].innerHTML = data[i].population;
		//Добавляем элемент (заполненную строку) в <tbody>
		temp.parentNode.appendChild(clone_temp);
	}
	
</script>
	
</body>
</html>

Пример №1