0Pricing
HTML Academy · Lesson

Using template with JavaScript Rendering

Combine templates with JavaScript loops for dynamic lists.

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.

All lessons in this course

  1. The template Element Inert Content
  2. Cloning Templates with cloneNode
  3. Using template with JavaScript Rendering
  4. Templates vs innerHTML Security
← Back to HTML Academy