Formation Apprendre le JavaScript : Les templates

Dans ce chapitre nous allons évoquer le système de template qui va nous permettre de stocker du contenu HTML dans une page web sans l'afficher.

Côté HTML

Ce système se repose sur l'utilisation d'une balise <template>.

<table id="producttable">
  <thead>
    <tr>
      <td>Code postal</td>
      <td>Ville</td>
    </tr>
  </thead>
  <tbody>
    <!-- On incluera les données ici en JS -->
  </tbody>
</table>

<template id="city">
  <tr>
    <td class="postal-code"></td>
    <td class="city-name"></td>
  </tr>
</template>

Cet élément est un fragment qui n'est pas affiché à l'utilisateur, pour lequel aucune règle CSS n'est appliqué et qui peut contenir (comme on le voit ici avec le <tr>) un élément qui attendrait un parent spécifique.

Côté JavaScript

En JavaScript on pourra récupérer l'élément en le sélectionnant comme n'importe quel autre élément.

const template = document.querySelector('#city')

On récupèrera alors un HTMLTemplateElement qui aura une propriété content qui permettra d'btenir un noeud de type DocumentFragment. Ce noeud agira comme une version allégé d'un Document et contiendra la structure HTML du template. On pourra l'utiliser pour ajouter le contenu du template à notre page.

const tbody = document.querySelector('tbody')
const template = document.querySelector('#city')

const tr = template.content.cloneNode(true)
const tds = tr.querySelectorAll('td')
tds[0].textContent = '34000'
tds[1].textContent = 'Montpellier'

tbody.append(tr)