template 要素スクリプトが利用する HTML の断片

template 要素は、複製され、スクリプトによって文書に挿入することが可能な HTML の断片を定義します。

サンプルソースを見る

template 要素の仕様

カテゴリ
コンテンツモデル

以下のいずれか

この要素を使用できる文脈
  • メタデータ・コンテンツが期待される場所
  • フレージング・コンテンツが期待される場所
  • スクリプト支援要素が期待される場所
  • span 属性を持たない colgroup 要素の直下
この要素で使用できる属性
DOM インタフェース
interface HTMLTemplateElement : HTMLElement {
  readonly attribute DocumentFragment content;
};

template 要素のサンプルソース

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>出身地</th>
      <th>性別</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <template id="row">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </template>
  </tbody>
</table>

<script>
  var data = [
    { 名前: '日本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
    { 名前: '日本次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
    { 名前: '日本三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
    { 名前: '日本花子', 出身地: '鹿児島県', 性別: '女性', 年齢: 31 },
    { 名前: '日本富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
  ];
</script>

<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.名前;
    cells[1].textContent = cat.出身地;
    cells[2].textContent = cat.性別;
    cells[3].textContent = cat.年齢;
    template.parentNode.appendChild(clone);
  }
</script>

関連する要素

W3C HTML5 仕様書

4.11.3 The template element