このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

template要素:テンプレートHTML5で追加

記事Oct. 4th, 2020
スクリプトで使用するためのテンプレートを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

template”要素はスクリプトによって複製して文書に挿入されるHTMLの断片を表します。

template”要素自体はブラウザでウェブページを表示したときには表示されません。“template”要素はスクリプトでその内容が挿入されない限り文書に対して何の影響も与えません。

template”要素はid”属性などでスクリプトと関連付けます。

HTML5で新しく追加された要素です。対応していないブラウザではbody”要素内に配置された“template”要素の内容はそのまま表示されてしまいますので注意が必要です。

サンプルコード

<template id="sampletemplate">
<tr>
<th class="rank"></th>
<td class="name"></td>
<td class="population"></td>
</tr>
</template>

<table id="sampletable">
<tr>
<th>順位</th>
<th>県名</th>
<th>人口</th>
</tr>
</table>

<script>
var arr = [
{"rank":"1", "name":"東京都", "population":"13,843,403"},
{"rank":"2", "name":"神奈川県", "population":"9,179,835"},
{"rank":"3", "name":"大阪府", "population":"8,824,566"},
{"rank":"4", "name":"愛知県", "population":"7,539,185"},
{"rank":"5", "name":"埼玉県", "population":"7,322,645"}
];

var template = document.getElementById('sampletemplate');

for(var i =0; i < arr.length; i++){
var clone = template.content.cloneNode(true);
clone.querySelector('.rank').textContent = arr[i].rank;
clone.querySelector('.name').textContent = arr[i].name;
clone.querySelector('.population').textContent = arr[i].population;
document.getElementById('sampletable').appendChild(clone);
}
</script>
順位 県名 人口

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

要素の内容

template”要素の内容はDOM上では“template”要素の子要素とはみなされず、文書本体のDOMツリーとは分かれた“DocumentFragment”に含まれます。このため“template”要素のコンテンツ・モデルは空要素とみなされます。

template”要素の内容にはコンテンツ・モデル、属性や属性値に関する文法の決まりが適用されません。例えば、img”要素は通常プレースホルダーとして使用することはできませんが、“template”要素の中にはsrc”属性が指定されていないimg”要素を配置することができます。ただし、省略不可のタグを省略するなど、基本的なHTMLの文法を逸脱することはできません。

仕様書

template”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<template>
定義なし

定義あり

定義あり

定義あり

定義あり
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク