HTML5

：

タグ（要素）

：

TEMPLATE

　 編集：2022.06.28 by T.A.

→● mdn

複製され、スクリプトによって文書に挿入できる HTML の断片を宣言するために使用される。

この要素を使用できる文脈

メタ データ内容が期待される場所。

フレージング内容が期待される場所。

スクリプトサポート要素が期待される場所。

span 属性を持たない COLGROUP 要素の子として。

内容モデル

Nothing（明確化のために、例を参照）。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

レンダリングにおいて、TEMPLATE 要素は何も表さない。

TEMPLATE 要素のテンプレート内容は、要素自体の子ではないこと。

例

たとえば、次の文書を考えてみる： 

<!DOCTYPE HTML>
<HTML lang="en">
 <HEAD>
  <TITLE>Homework</TITLE>
 <BODY>
  <TEMPLATE id="template"><P>Smile!</P></TEMPLATE>
  <SCRIPT>
   let num = 3;
   const fragment = document.getElementById('template').content.cloneNode(true);
   while (num-- > 1) {
     fragment.firstChild.before(fragment.firstChild.cloneNode(true));
     fragment.firstChild.textContent += fragment.lastChild.textContent;
   }
   document.body.appendChild(fragment);
  </SCRIPT>
</HTML>

TEMPLATE における P 要素は、DOM 内の TEMPLATE の子ではない。TEMPLATE 要素の content IDL 属性によって返される DocumentFragment の子である。

スクリプトが TEMPLATE 要素の appendChild() を呼び出すと、（他の要素の場合と同様に）TEMPLATE 要素に子要素が追加される。しかし、そのようにすることは、TEMPLATE 要素のコンテンツモデルに違反することになる。

HTML： 

<TABLE id="producttable">
  <THEAD>
    <TR>
      <TD>UPC_Code
      <TD>Product_Name
  </THEAD>
  <TBODY>
    <!-- オプションで既存のデータをここに含めることができます -->
  </TBODY>
</TABLE>

<TEMPLATE id="productrow">
  <TR>
    <TD class="record"></TD>
    <TD></TD>
  </TR>
</TEMPLATE>

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

表が生成され、テンプレートが定義されました。JavaScript を使って、テンプレートを基に構築される各行を表に挿入します。

JavaScript： 

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

    // 既存の HTML tbody と template の行を使って
    // table をインスタンス生成します。
    var tbody = document.querySelector("tbody");
    var template = document.querySelector('#productrow');

    // 新しい行を複製して表に挿入します。
    var clone = template.content.cloneNode(true);
    var td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

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

    tbody.appendChild(clone2);

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

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

<TEMPLATE id=IdReiTemplate>
<SPAN>テスト</SPAN>
</TEMPLATE>
<DIV id=IdReiDiv style="border:1px solid black;"></DIV>
<SCRIPT>
IdReiDiv.innerHTML=IdReiTemplate.innerHTML;
</SCRIPT>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：