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

テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが <template> 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。

コンテンツカテゴリ メタデータコンテンツ, フローコンテンツ, 記述コンテンツ, スクリプト対応要素
許可されている内容 制限なし
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 <body>, <frameset>, <head>, <dl>, span 属性を持たない <colgroup>
許可されている ARIA ロール なし
DOM インターフェイス HTMLTemplateElement

属性

この要素には、グローバル属性のみがあります。

まず、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');

    // 新しい行を複製して表に挿入します。
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tb.appendChild(clone);

    // 新しい行を複製して表に挿入します。
    var clone2 = document.importNode(t.content, true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tb.appendChild(clone2);

} else {
  // HTML template 要素に対応していないので 
  // 表に行を追加するほかの方法を探します。
}

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

仕様書

仕様書 状態 備考
HTML Living Standard
template element の定義
現行の標準  
HTML5
template element の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26Edge 完全対応 13Firefox 完全対応 22IE 未対応 なしOpera 完全対応 15Safari 完全対応 8WebView Android 完全対応 ありChrome Android 完全対応 26Edge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android ? Safari iOS 完全対応 8Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報