The template Element Inert Content
Define HTML that is parsed but not rendered until activated.
What Is the template Element?
The <template> element holds HTML that is parsed but not rendered:
- Content is in the DOM but not displayed
- Scripts inside don't execute
- Images don't load
- CSS doesn't apply
- It is 'inert' until cloned
Basic template Usage
Define a template and inspect its content:
<template id="card-template">
<div class="card">
<h2 class="card-title"></h2>
<p class="card-body"></p>
<a class="card-link">Learn more</a>
</div>
</template>
<script>
const tmpl = document.getElementById('card-template');
console.log(tmpl.content); // DocumentFragment
console.log(tmpl.content.querySelector('.card')); // The div node
// Not rendered on the page yet
</script>All lessons in this course
- The template Element Inert Content
- Cloning Templates with cloneNode
- Using template with JavaScript Rendering
- Templates vs innerHTML Security