0Pricing
HTML Academy · Leçon

L’élément `template` : contenu inerte

Définissez du HTML analysé mais non rendu tant qu’il n’est pas activé.

L’élément `template` : contenu inerte est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que l'élément template ?

L'élément <template> contient du HTML qui est analysé, mais pas rendu :

  • Le contenu se trouve dans le DOM, mais n'est pas affiché
  • Les scripts qu'il contient ne s'exécutent pas
  • Les images ne sont pas chargées
  • Le CSS ne s'applique pas
  • Il reste « inerte » jusqu'à ce qu'il soit cloné

Utilisation de base de template

Définissez un modèle et examinez son contenu :

<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>

template.content

La propriété .content renvoie un DocumentFragment :

const template = document.querySelector('#card-template');
const fragment = template.content;

// fragment is a DocumentFragment — a lightweight DOM container
// It is not attached to the document
// Modifying fragment does NOT affect the original template
// You must clone it before using it

Clonage d'un template

Utilisez cloneNode(true) pour créer une copie du contenu du modèle :

const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);  // true = deep clone

// Modify the clone:
clone.querySelector('.card-title').textContent = 'HTML5 Guide';
clone.querySelector('.card-body').textContent = 'Learn HTML5 from scratch.';
clone.querySelector('.card-link').href = '/html5';

// Add to the page:
document.getElementById('card-list').appendChild(clone);

Rendu d'une liste à partir d'un template

Générez plusieurs éléments à partir d'un seul modèle :

<ul id="users"></ul>

<template id="user-tmpl">
  <li class="user">
    <strong class="user-name"></strong>
    <span class="user-role"></span>
  </li>
</template>

<script>
const tmpl = document.getElementById('user-tmpl');
const list = document.getElementById('users');

const users = [
  { name: 'Alice', role: 'Admin' },
  { name: 'Bob', role: 'Editor' },
];

users.forEach(user => {
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.user-name').textContent = user.name;
  clone.querySelector('.user-role').textContent = user.role;
  list.appendChild(clone);
});
</script>

Pourquoi utiliser template plutôt que innerHTML&nbsp;?

template est plus sûr et plus efficace que innerHTML :

// innerHTML approach (less safe):
container.innerHTML = `<div>${userProvidedContent}</div>`;
// Risk: XSS if userProvidedContent is not sanitized

// template approach (safer):
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.name').textContent = userProvidedContent;
// textContent sets text only — HTML tags are not parsed
// No XSS risk

template avec des données imbriquées

Modèles complexes avec des structures imbriquées :

<template id="post-tmpl">
  <article>
    <header>
      <h2 class="title"></h2>
      <time class="date" datetime=""></time>
    </header>
    <p class="excerpt"></p>
    <a class="read-more">Read more</a>
  </article>
</template>

<script>
function renderPost(post) {
  const clone = document.getElementById('post-tmpl').content.cloneNode(true);
  clone.querySelector('.title').textContent = post.title;
  clone.querySelector('.date').textContent = post.date;
  clone.querySelector('.date').dateTime = post.isoDate;
  clone.querySelector('.excerpt').textContent = post.excerpt;
  clone.querySelector('.read-more').href = post.url;
  return clone;
}
</script>

template n'est pas rendu

Vérifiez que le contenu de template est masqué pour les utilisateurs :

<template id="hidden-tmpl">
  <script>alert('This runs when cloned, not when defined');</script>
  <img src="wont-load-yet.jpg" alt="Won't load until cloned">
</template>
<!-- The script and image are NOT activated until you clone and append the template -->
<!-- This makes templates safe for defining content without side effects -->

template contre script type=text/html

Ancienne approche contre template moderne :

<!-- Old pattern (script hack): -->
<script type="text/html" id="old-tmpl">
  <div class="card">...</div>
</script>
<script>
const html = document.getElementById('old-tmpl').innerHTML;
container.innerHTML = html;  // XSS risk!
</script>

<!-- Modern template: -->
<template id="card-tmpl">...</template>
<!-- Safer, semantic, no XSS risk -->

template dans les bibliothèques de composants

Approches fondées sur template dans des bibliothèques de composants sans cadre logiciel :

class UserCard extends HTMLElement {
  connectedCallback() {
    const tmpl = document.getElementById('user-card-tmpl').content.cloneNode(true);
    tmpl.querySelector('.name').textContent = this.getAttribute('name');
    this.appendChild(tmpl);
  }
}

Vérification rapide

Que fait cloneNode(true) avec la propriété content d'un template ?

Récapitulatif&nbsp;: élément template

Les notions essentielles de template :

  • HTML inerte — analysé, mais pas rendu
  • template.content — renvoie un DocumentFragment
  • content.cloneNode(true) — copie profonde, prête à être modifiée et ajoutée
  • Plus sûr que innerHTML — aucune injection HTML via textContent
  • Utilisé dans les éléments personnalisés, les interfaces répétitives et les composants Web

Questions Fréquemment Posées

La leçon « L’élément `template` : contenu inerte » est-elle gratuite ?

Oui — le texte complet de « L’élément `template` : contenu inerte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’élément `template` : contenu inerte » ?

Définissez du HTML analysé mais non rendu tant qu’il n’est pas activé. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « L’élément `template` : contenu inerte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’élément `template` : contenu inerte
  2. Cloner des modèles avec `cloneNode`
  3. Utiliser `template` pour le rendu JavaScript
  4. Modèles ou `innerHTML` : sécurité
← Retour à HTML Academy