Using template with JavaScript Rendering
Combine templates with JavaScript loops for dynamic lists.
Using template with JavaScript Rendering is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The template Element
The <template> element holds HTML that is not rendered until cloned and inserted by JavaScript. Its content is inert — scripts don't run, images don't load, styles don't apply — until the template is activated.
Accessing Template Content
Template content lives in a DocumentFragment at template.content. To use it, clone the fragment: const clone = template.content.cloneNode(true). The true argument performs a deep clone including all descendant nodes.
Rendering Template Instances
Customize the clone before inserting: query within the clone, set text content, add event listeners. Then append to the DOM: container.appendChild(clone). Each cloneNode() creates an independent copy — modify one without affecting others.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Rendering Lists from Templates
Combine templates with Array.forEach or Array.map to render lists: for each item in data, clone the template, fill in values, and append to a list container. This pattern is framework-like but built on standard HTML and JavaScript.
Template for Table Rows
Define a <template> containing a <tr> with cells. Clone and populate for each data row. This avoids string concatenation for HTML generation — no escaping required since you set textContent rather than innerHTML.
Template Activation is Explicit
Templates never auto-render. This makes them safe for storing fragments that will render conditionally: show a "no results" template only when search returns empty, an error template only on network failure, a loading skeleton during data fetch.
Nested Templates
A template can contain other templates — nested templates remain inert inside the outer template's DocumentFragment. This enables component-like hierarchies where an outer template clones and then activates inner templates as needed.
Scoped Styles in Templates
Styles inside a template's <style> tag do not apply to the document — they are inert until the template is instantiated and its content is moved to the live DOM. This allows templates to carry their own styles without polluting the page.
Template vs innerHTML
innerHTML parsing is synchronous HTML string processing — it re-parses HTML each time. template.cloneNode() copies an already-parsed tree. For repeated rendering of the same structure, template cloning is faster and avoids XSS risks from string concatenation.
Data Binding Limitations
The template element has no built-in data binding — you must manually query and populate each clone. For complex data binding needs, a framework or library is more appropriate. Templates are for simple, manual rendering patterns without framework overhead.
Browser Support
The template element is supported in all modern browsers (IE11 had partial support). For environments requiring IE support, polyfill by parsing template content on initialization. In modern projects, use template without a polyfill.
Knowledge Check
Why is template.content.cloneNode(true) preferred over innerHTML for repeated rendering?
Summary
The template element holds inert, pre-parsed HTML fragments. Cloning template.content creates independent instances for manual data binding. Combined with textContent assignment (no XSS), templates enable framework-like list rendering, conditional UI, and reusable HTML patterns with only standard browser APIs.
Frequently asked questions
Is the “Using template with JavaScript Rendering” lesson free?
Yes — the full text of “Using template with JavaScript Rendering” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Using template with JavaScript Rendering”?
Combine templates with JavaScript loops for dynamic lists. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Using template with JavaScript Rendering” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The template Element Inert Content
- Cloning Templates with cloneNode
- Using template with JavaScript Rendering
- Templates vs innerHTML Security