<template> 要素は、そのHTMLの内容を複製しスクリプトに提供するために使用します。例えば、新しいデータに応じて文書の内容を動的に変更するために、値を挿入する（テーブルやリストなどの）HTMLタグのテンプレートを指定したりします。基本的には、<template> 要素の内容は何も表示されません。各<template> 要素はその内容に関連するドキュメント・オブジェクトがあります。
- カテゴリー
- メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ、スクリプトサポート・エレメント
- 配置場所
- メタデータ・コンテンツまたはフレージング・コンテンツ、スクリプトサポートエレメントが配置可能な場所。
span 属性を持たないcolgroupの子要素。 - 内容
- メタデータ・コンテンツまたはフロー・コンテンツ。または以下の要素の内容。
ol、ul、dlの内容。
figureの内容。
rubyの内容。
objectの内容。
video、audioの内容。
table、colgroup、thead、tbody、tfoot、trの内容。
fieldset、selectの内容。 - 属性
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 › template</title>
</head>
<body>
<h1>HTML5 › template</h1>
<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>
</body>
</html>