<template>
<template> 要素は、ページ読み込み時にはレンダリングされず、JavaScript で複製して利用するための HTML フラグメントを保持します。
概要
<template> 要素は、ページ読み込み時にはレンダリングされず、JavaScript で複製して利用するための HTML フラグメントを保持します。
対応ブラウザ
デスクトップ
Chrome 26+
Edge 13+
Safari 8+
Firefox 22+
モバイル
Chrome Android 26+
Safari iOS 8+
Firefox Android 22+
基本構文
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>実務での使いどころ
-
<template> の活用
クライアントサイドで複製して使用するためのHTML テンプレート要素。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。