<template>

概要

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

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

コンテンツカテゴリ メタデータコンテンツフローコンテンツフレージングコンテンツ、スクリプトサポート要素
許可された内容 メタデータコンテンツフローコンテンツ、次の要素内で許可されている有効な HTML コンテンツ: <ol><dl><figure><ruby><object><video><audio><table><colgroup><thead><tbody><tfoot><tr><fieldset><select><details> および type 属性がポップアップメニュー内に書かれた <menu>
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 <body><frameset><head> および span 属性を持たない <colgroup>
DOM インターフェース HTMLTemplateElement

属性

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

読み取り専用で 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 ができます:

仕様

仕様書 状況 コメント
WHATWG HTML Living Standard
template element の定義
現行の標準 変更なし
HTML5
template element の定義
勧告 初期定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 26 22 (22) Edge 13 15 7.1
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? iOS 8

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: Marsf, YuichiNukiyama
 最終更新者: Marsf,