<template> - テンプレート

トップ > HTMLリファレンス > <template>

概要

形式
<template>~</template>
サポート
LS / H5 / Ch26 / Fx22 / Sa7.1 / Op15
カテゴリ
メタデータコンテンツ
フローコンテンツ
フレージングコンテンツ
スクリプトサポート要素
親要素
メタデータコンテンツ, フレージングコンテンツ, スクリプトサポート要素 を子要素に持てるもの
span属性を持たない colgroup要素
子要素
フローコンテンツ, メタデータコンテンツ
ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select, detail, menu(ポップアップ)要素の子要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

template は、スクリプトで利用される要素のテンプレートを定義する際に用いられます。

<template>~</template> で囲まれた部分は、ページを表示した際には表示されません。JavaScript 等のスクリプトの中で複製され、値を設定され、挿入されることで表示されるようになります。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

下記の例では、テーブルの 1行に対応するテンプレートを定義しておき、JavaScript の中でテンプレートを複製(clone)し、値を設定し、tbody要素に挿入することで、テーブルの各行を生成しています。

HTML
<!DOCTYPE html>
<html>
<head>
<title>Cat data</title>
<script>
var data = [
  { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female' },
  { name: 'Hedral', color: 'Tuxedo', sex: 'Male' },
];
</script>
</head>
<body>
<table>
 <thead>
  <tr>
   <th>Name</th><th>Color</th><th>Sex</th></tr>
  </tr>
 </thead>
 <tbody>
  <template id="row">
   <tr><td></td><td></td><td></td></tr>
  </template>
 </tbody>
</table>
<script>
window.onload = function() {
  var template = document.querySelector('#row');
  if (!'content' in template) {
      return;
  }
  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;
    template.parentNode.appendChild(clone);
  }
};
</script>
</body>
</html>
表示
NameColorSex
PillerTicked TabbyFemale
HedralTuxedoMale

上記では JavaScript でデータのマッピングを行っていますが、<slot> 要素と slot 属性を用いてマッピングを行うこともできます。詳細は Shadow DOM を参照してください。

関連項目

<script>, <slot>, slot, Shadow DOM

リンク


Copyright (C) 2015-2017 杜甫々
初版:2015年1月17日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/template.htm