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
Примеры
<!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