Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<template>

<template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<template>
26
13
22
8
26
8
DOM API
HTMLTemplateElement

HTMLTemplateElement インターフェイスは、HTML の template 要素の内容にアクセスできるようにします。
26
13
22
8
26
8
content

HTMLTemplateElement.content プロパティは、 要素のテンプレートの内容 (DocumentFragment) を返します。
26
13
22
8
26
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
<template id="row-template">
  <tr>
    <td class="name"></td>
    <td class="email"></td>
  </tr>
</template>
<script>
  const tmpl = document.getElementById('row-template');
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.name').textContent = '山田';
  document.querySelector('tbody').appendChild(clone);
</script>

ライブデモ

tenpre-telement. structure

kro-nusage. with Template inside. content is rendaring.JS.

プレビュー全画面表示

listgenerate. Usage

table row. tenpre-t definition, de-ta from dynamic to generate. with template

プレビュー全画面表示

template special

Template inside is parse that rendaring.script also Run.

プレビュー全画面表示

実務での使いどころ

  • <template> の活用

    <template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク