template
<template> 要素はスクリプトでデータを挿入するための HTML テンプレートを予め準備しておくために使用します。ページ読み込み時は描画されませんがスクリプトを実行すると有効になります。
- 分類
- メタデータコンテンツ、フローコンテンツ、フレージングコンテンツ、スクリプト対応要素
- 内包できるもの
- 制限なし
属性
グローバル属性のみ
サンプル
実行ボタンを押すと画像が次々と生成されるスクリプトです。<template> でテンプレートを用意しておくことで DOM で要素を毎回生成する必要がなくなるということになります。
HTML
<p><button id="runBtn">実行</button></p>
<div>
<template id="imgBox">
<p><img width="300" /></p>
</template>
</div>Javascript
function tmp() {
var tmpTag = document.querySelector("#imgBox");
var runBtn = document.querySelector("#runBtn");
runBtn.onclick = function() {
var clone = tmpTag.content.cloneNode(true);
clone.querySelector("img").setAttribute("src", "https://webmas.jp/wp-content/uploads/2020/09/img20010a.png");
tmpTag.parentNode.appendChild(clone);
}
}
window.addEventListener("load", tmp, false);