template要素？
template要素（タグ）は、html5から追加された要素です。
名前が示すとおり、テンプレートのようにページ内で繰り返し表示したい内容を<template>...</template>内に書いておき、JavaScriptと組み合わせて使います。
書くだけでは表示されない
htmlの他要素とは違い、htmlファイル内に以下のように書くだけでは、ブラウザで表示されません。
template要素内に書いたコンテンツは、隠れたDOMとして扱われレンダリングされないためです。
ブラウザで表示するためには、JavaScriptを使います。
<template id="template">
<p>テンプレート</p>
</template>
基本的な使い方
htmlでテンプレートを作成
テンプレートとして使いたい内容を<templae>...</template>内に書き、表示エリアを用意します。
html
<!-- テンプレートとして表示したい内容 -->
<template id="template">
<p>テンプレート</p>
</template>
<!-- テンプレート表示エリア -->
<div id="container"></div>
この時点では、template要素内に書いた内容はブラウザには表示されません。
JavaScriptで表示
template要素内の内容をブラウザに表示するには、JavaScriptを使います。
必要な処理は、３つだけです。
- template要素を取得
- 取得したtemplate要素の内容を複製
- DOMに追加
javascript
// template要素を取得
var template = document.getElementById('template');
// template要素の内容を複製
var clone = template.content.cloneNode(true);
// div#containerの中に追加
document.getElementById('container').appendChild(clone);
テンプレートの表示内容に、配列の値を挿入したいなど、加工が必要な場合は「3. DOMに追加」の前に処理します。
まとめると以下のようになります。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>template要素の使い方</title>
</head>
<body>
<!-- テンプレートとして表示したい内容 -->
<template id="template">
<p>テンプレート</p>
</template>
<!-- テンプレート表示エリア -->
<div id="container"></div>
<script>
// template要素を取得
var template = document.getElementById('template');
// template要素の内容を複製
var clone = template.content.cloneNode(true);
// div#vcontainerの中に追加
document.getElementById('container').appendChild(clone);
</script>
</body>
</html>
加工する
配列のデータを挿入
table要素の行（<tr>...</tr>）をtemplate要素で生成するサンプルです。
複製したtemplate要素に、配列のデータを挿入し、ループ処理でtable要素に追加します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>templateタグの使い方</title>
</head>
<body>
<!-- テンプレートとして表示したい内容 -->
<template id="template">
<tr>
<th class="date"></th>
<td class="weather"></td>
</tr>
</template>
<!-- テンプレート表示エリア -->
<table id="container" border="1">
<tr><th>日付</th><th>天気</th></tr>
</table>
<script>
// データ
var arr = [
{"date":"09/17", "weather":"晴れ"},
{"date":"09/18", "weather":"曇りのち雨"},
{"date":"09/19", "weather":"曇りのち晴れ"}
];
// template要素を取得
var template = document.getElementById('template');
for(var i =0; i < arr.length; i++){
// template要素の内容を複製
var clone = template.content.cloneNode(true);
// 複製したtemplate要素にデータを挿入
clone.querySelector('.date').textContent = arr[i].date;
clone.querySelector('.weather').textContent = arr[i].weather;
// div#containerの中に追加
document.getElementById('container').appendChild(clone);
}
</script>
</body>
</html>
参考