HTML элемент template

HTML элемент template — Шаблон
. Все HTML элементы.

HTML элемент template: Пример кода

 <h2>Пример 1: создание шаблона</h2>
<table>
 <thead>
 <tr>
 <th>Имя <th>Цвет <th>Руки <th>Ноги
 <tbody>
 <template id="row">
 <tr><td><td><td><td>
 </template>
</table>
 
 
<h2>Пример 2: создание шаблона</h2>
 <!DOCTYPE html>
<title>Cat data</title>
<script>
 // Data is hard-coded here, but could come from the server
 var data = [
 { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
 { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
 ];
</script>
<table>
 <thead>
 <tr>
 <th>Name <th>Color <th>Sex <th>Legs
 <tbody>
 <template id="row">
 <tr><td><td><td><td>
 </template>
</table>
<script>
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
 var cat = data[i];
 var clone = template.content.cloneNode(true);
 var cells = clone.querySelectorAll('td');
 cells[0].textContent = cat.name;
 cells[1].textContent = cat.color;
 cells[2].textContent = cat.sex;
 cells[3].textContent = cat.legs;
 template.parentNode.appendChild(clone);
 }
</script>

HTML элемент template: атрибуты

globals