gacor: Réutiliser le balisage côté client avec l'élément de modèle HTML

L'élément de modèle contient un balisage qui n'est rendu que lorsque le code le clone. Il est utile pour répéter une petite structure telle qu'une ligne de résultats tout en gardant le balisage lisible en HTML.

<template id="result-template">
  <li class="result">
    <a class="result-link"></a>
    <p class="result-summary"></p>
  </li>
</template>
<ul id="results"></ul>

const template = document.querySelector("#result-template");
const list = document.querySelector("#results");

function addResult(result) {
  const item = template.content.firstElementChild.cloneNode(true);
  item.querySelector(".result-link").textContent = result.title;
  item.querySelector(".result-link").href = result.url;
  item.querySelector(".result-summary").textContent = result.summary;
  list.append(item);
}

Remplir le texte sous forme de texte

Utilisez textContent pour les valeurs provenant d'utilisateurs ou de données externes. Évitez de placer ces valeurs dans une chaîne HTML à moins qu'elles ne soient correctement nettoyées pour ce contexte exact.

Un modèle est une source de balisage pratique, et non un système de composants en soi. Gardez les comportements répétés et les étiquettes accessibles cohérents à mesure que chaque clone est rempli.