<template>

概要

HTML template 要素 <template> は、ページの読み込み時に描画されず、後で JavaScript を使用してインスタンス生成できるクライアントサイドのコンテンツを保持するメカニズムです。

template は、後で使用するための、ドキュメン内に格納されたコンテンツの断片として考えることができます。ページの読み込み中にパーサが <template> 要素のコンテンツを処理している間、そのコンテンツの有効性のみが検証され、要素のコンテンツは描画されません。

属性

この要素は、グローバル属性 を含みます。

読み取り専用で template のコンテンツへのアクセスを提供する content 属性も含まれます。content 属性が存在することで、ブラウザが <template> 要素をサポートしているか確認するために使用できます。

例

まず、HTML 部分から例を始めます。

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 必要に応じて既存のデータをここに含められます。 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template> 

まず、JavaScript コードを使用して後からコンテンツを挿入するための table を作ります。次に、1 行分を表す HTML 断片の構造が書かれた template が続きます。

table が生成され、template が定義されました。JavaScript を使って、template を基に構築される各行を table に挿入します。

// templete 要素の content 属性の有無を確認することで、
// ブラウザが HTML template 要素をサポートしているかテストします。
if ('content' in document.createElement('template')) {

  // 既存の HTML tbody と template の行を使って table をインスタンス生成します。
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 新しい行を複製してテーブルに挿入します。
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // 新しい行を生成します。
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 新しい行を複製してテーブルに挿入します。
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // HTML template 要素がサポートされていないので 
  // テーブルに行を追加するほかの方法を探します。
}

結果として、JavaScript を通して、新しい行が追加された HTML table ができます:

table {
  background: #000;
}
table td {
  background: #fff;
}

仕様

ブラウザ実装状況

関連項目

• Web コンポーネント： <content>, <shadow>