<template></template>

ブラウザ
  • Cr
  • Fx
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 / span属性がないcolgroup要素の子要素として
内容 メタデータ・コンテンツ / フロー・コンテンツ / 特定要素のコンテンツ・モデルを継承(本文参照

template要素は、スクリプトで利用されるHTMLコードのテンプレートを表します。


<template>

スクリプトで利用されるテンプレート

</template>

template要素は、スクリプト(JavaScript 等)と組み合わせて使用することになります。


例えば、表の行部分をテンプレート化すると次のようになります。(id属性を指定してスクリプトと関連付けています)

<table border="1">

<thead>
<tr>
<th>名前</th><th>ふりがな</th><th>年齢</th></tr>
</tr>
</thead>

<tbody>

<template id="row">
<tr>
<td></td><td></td><td></td>
</tr>
</template>

</tbody>

</table>


<script>
// テンプレートを利用するスクリプト
// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#row');
... 以下省略
</script>

上記のように記述することで、スクリプトがtemplate要素の内容を取得して何らかの処理を行えるようになります。

上記の場合、例えば次のような処理が行えます。

  1. スクリプトがtemplate要素の内容(<tr></tr>)を取得して複製を作成。
  2. 予め設定しておいたデータを各td要素内に挿入し、その行をtbody要素内に追加。
  3. 必要な行数分、上記の処理を繰り返す。

次の例では、リストの項目をテンプレート化しています。

<ul>

<template id="item">
<li></li>
</template>

</ul>


<script>
// テンプレートを利用するスクリプト
// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#item');
... 以下省略
</script>

template要素に対応しているブラウザでは、この要素の内容はレンダリングされません。上記の <li></li> は、スクリプトに読み込まれるだけの存在となります。

  • ただし、template要素に対応していないブラウザでは、この要素の内容が表示されてしまいます。

要素の内容に関して

template要素の内容には、メタデータ・コンテンツフロー・コンテンツの他に、以下の要素内に含められる要素を配置することができます。(各要素のコンテンツ・モデルを継承します)

使用例

リストの項目(li要素)をテンプレート化した例

<ul>

<template id="example">
<li>template要素に対応していません</li>
</template>

</ul>


<script>

// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#example');

// template要素に対応している場合は以下を実行
if ('content' in template) {

   // リストの項目となるデータを設定
   var data = ['リスト項目1','リスト項目2','リスト項目3'];

   for (var i = 0; i < data.length; i++) {

      // テンプレートの複製を変数に代入
      var clone = template.content.cloneNode(true);

      // 複製のli要素内にデータを挿入
      clone.querySelector('li').textContent = data[i];

      // データを挿入した複製を親要素内に追加
      template.parentNode.appendChild(clone);

   }

}

</script>

表示例
  • template要素に対応しているブラウザでは、スクリプトによって3つのリスト項目が表示されます。(JavaScriptが無効になっている場合は何も表示されません)
  • 未対応のブラウザでは、template要素の内容がそのまま表示されてしまいます。