<template>
The <template> HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 26 | 13 | 22 | 8 | 26 | 8 | |
| DOM API | ||||||
| The HTMLTemplateElement interface enables access to the contents of an HTML template element. | 26 | 13 | 22 | 8 | 26 | 8 |
| The content property of the HTMLTemplateElement interface returns the element's template contents as a DocumentFragment. This content's Node/ownerDocument is a separate Document from the one that contains the element itself — unless the containing document is itself constructed for the purpose of holding template content. | 26 | 13 | 22 | 8 | 26 | 8 |
Syntax
<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>Live demo
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
Use cases
-
Using <template>
The <template> HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.