template 要素スクリプトが利用する HTML の断片
template 要素は、複製され、スクリプトによって文書に挿入することが可能な HTML の断片を定義します。
template 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
- メタデータ・コンテンツが期待される場所
- フレージング・コンテンツが期待される場所
- スクリプト支援要素が期待される場所
- span 属性を持たない colgroup 要素の直下
- この要素で使用できる属性
template 要素のサンプルソース
<table>
<thead>
<tr>
<th>名前</th>
<th>出身地</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<template id="row">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</tbody>
</table>
<script>
var data = [
{ 名前: '日本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
{ 名前: '日本次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
{ 名前: '日本三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
{ 名前: '日本花子', 出身地: '鹿児島県', 性別: '女性', 年齢: 31 },
{ 名前: '日本富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
];
</script>
<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.名前;
cells[1].textContent = cat.出身地;
cells[2].textContent = cat.性別;
cells[3].textContent = cat.年齢;
template.parentNode.appendChild(clone);
}
</script>