HTMLのtemplate要素の説明です。template要素は、スクリプトによって内容を追加したりするためのテンプレートであることを定義する要素です。
目次
要素の記述例
template要素の記述例
<template id="template"><p>PC</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>
閲覧中ブラウザーでの表示結果
要素の説明
- template要素は、スクリプトによって内容を追加したりするためのテンプレートであることを定義する要素です。
利用できる属性
グローバル属性
HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。
イベントハンドラ属性
template要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。
ブラウザデフォルトCSS設定
Google Chromeの場合
template要素のブラウザデフォルトCSS
template {
display: none;
}