Définition du modèle HTML

Introduction

La balise <template> en HTML vous permet de créer un contenu réutilisable qui n'est pas affiché sur une page lors de son chargement. Cela est utile lorsque vous avez un contenu qui n'est pas nécessaire au début du chargement de la page mais peut être consulté plus tard à l'aide de JavaScript. Ce laboratoire vous guidera tout au long des étapes pour créer un modèle HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

Ajoutez la balise <template>

Tout d'abord, créez un fichier HTML nommé index.html.

Ajoutez la balise <template> à votre fichier HTML. Cette balise nécessite une balise d'ouverture et de fermeture et devrait contenir le contenu que vous souhaitez réutiliser plus tard.

<template id="myTemplate">
  <h2>C'est un modèle</h2>
  <p>Voici du texte qui peut être réutilisé.</p>
</template>

Note: L'attribut id peut vous aider à vous référer au modèle plus tard en JavaScript.

Créez une zone de substitution

Créez une zone vide où vous insérerez le contenu du modèle. Pour ce faire, utilisez la balise <div> et donnez-lui un attribut id.

<div id="placeholder"></div>

Utilisez JavaScript pour afficher le modèle

Ajoutez un bloc de code JavaScript à votre fichier HTML pour afficher le contenu du modèle dans la zone de substitution.

<script>
  const template = document.getElementById('myTemplate'); const placeholder =
  document.getElementById('placeholder'); const clone =
  template.content.cloneNode(true); placeholder.appendChild(clone);
</script>

Ce code récupérera d'abord le modèle à partir du HTML en utilisant la méthode getElementById, puis créera un clone de son contenu. Le contenu est ensuite ajouté à la zone de substitution.

Enregistrez le fichier index.html et ouvrez-le dans un navigateur web. Vous devriez voir le contenu du modèle apparaître dans la zone de substitution.

Sommaire

L'utilisation de la balise HTML <template> est un moyen simple et utile de créer un contenu réutilisable dans vos pages web. Grâce à JavaScript, vous pouvez afficher dynamiquement le contenu lorsqu'il est nécessaire. Cela peut aider à réduire la redondance dans votre code et à le rendre plus facile à maintenir.