template

templateタグの概要

templateタグは、HTML内でテンプレートを定義するためのタグです。このタグ内のコンテンツは表示されず、スクリプトから複製して使用することができます。

一度に複数のコンテンツを動的に生成する際に利用されます。

templateタグの基本の書き方

<template id="myTemplate">
  <p>This is a template</p>
</template>

templateタグの使用例

<template id="myTemplate">
  <p>This is a template</p>
</template>

<script>
  var template = document.getElementById('myTemplate');
  var clone = document.importNode(template.content, true);
  document.body.appendChild(clone);
</script>

よくある注意点・間違い

templateタグは表示されないため、スクリプトを使用して内容を取得し、表示する必要があります。また、templateタグの中には直接表示用のコンテンツを入れることはできません。