template要素 - コンテンツテンプレート要素

　HTMLのコンテンツテンプレート（template）要素は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScriptを使用してインスタンスを生成できる HTMLを保持するメカニズムです。

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

属性

　ただし、HTMLTemplateElement の contentプロパティは、読み取り専用の DocumentFragmentで、テンプレートが表現する DOMサブツリーを保持しています。

例


<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を作ります。次に、１行分を表す HTML断片の構造が書かれた templateが続きます。

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


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

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

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

	tbody.appendChild(clone);

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

	tbody.appendChild(clone2);

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

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