HTML5タグリファレンス
template

投稿 | | カテゴリー タグリファレンス, HTML5
HTML5で追加

<template>要素は、そのHTMLの内容を複製しスクリプトに提供するために使用します。例えば、新しいデータに応じて文書の内容を動的に変更するために、値を挿入する(テーブルやリストなどの)HTMLタグのテンプレートを指定したりします。基本的には、<template>要素の内容は何も表示されません。各<template>要素はその内容に関連するドキュメント・オブジェクトがあります。


カテゴリ
メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ、スクリプトサポートエレメント
配置場所
メタデータ・コンテンツまたはフレージング・コンテンツ、スクリプトサポートエレメントが配置可能な場所。span属性を持たない<colgroup>の子要素。
内容
メタデータ・コンテンツまたはフロー・コンテンツ。または以下の要素の内容。
<ol><ul><dl>の内容。
<figure>の内容。
<ruby>の内容。
<object>の内容。
<video><audio>の内容。
<table><colgroup><thead><tbody><tfoot><tr>の内容。
<fieldset><select>の内容。
属性
グローバル属性

accesskey, class, contenteditable, data-*, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 › template</title>
</head>
<body>
<h1>HTML5 › template</h1>
<script>
 // Data is hard-coded here, but could come from the server
 var data = [
   { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
   { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
 ];
</script>
<table>
 <thead>
  <tr>
   <th>Name <th>Color <th>Sex <th>Legs
 <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;
   cells[3].textContent = cat.legs;
   template.parentNode.appendChild(clone);
 }
</script>
</body>
</html>