<template>タグは、テンプレートを表す際に使用します。
template要素は、スクリプトで作成しデータをドキュメントに挿入するためのテンプレートを宣言します。
ここでいうテンプレートとはHTMLコードの断片のことです。
template要素の内側に記述されるマークアップは、template要素の子要素ではありません。
それは、あくまでもテンプレートとして宣言されたHTMLコードの断片に過ぎません。
template要素自体は、レンダリングでは何も表しません。
以下のサンプルは、template要素を使用して「 <p>Smile!</p> 」というテンプレートを宣言しています。
template要素内のp要素は、DOMにおける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要素でテンプレートを用意して、
そこへスクリプトのfor文によるループ処理でデータを流し込んでいます。
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>猫のデータ</title>
<script>
var data = [
{ name: 'モモ', color: 'ハチワレ', sex: 'メス' },
{ name: 'おはぎ', color: 'キジトラ', sex: 'オス' },
];
</script>
<table>
<thead>
<tr>
<th>名前 <th>毛色 <th>性別
<tbody>
<template id="row">
<tr><td><td><td><td>
</template>
</table>
<script>
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
template.parentNode.appendChild(clone);
}
</script>
</html>