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>

template要素の使い方、知ってます？