Comment puis-je créer des en-têtes et des pieds de page réutilisables en HTML à l'aide de JavaScript ?

Création de fichiers d'en-tête et de pied de page réutilisables pour les pages HTML

Introduction :

Dans le domaine du développement Web, il est souvent Il est utile de créer des éléments réutilisables, tels que des en-têtes et des pieds de page, qui peuvent être intégrés de manière transparente sur plusieurs pages HTML. Cette pratique rationalise non seulement la maintenance, mais garantit également la cohérence et l'efficacité.

Solution utilisant JavaScript :

Pour résoudre le problème, vous pouvez exploiter la puissance de JavaScript, en particulier jQuery . En utilisant sa fonction load(), vous pouvez charger dynamiquement des fichiers HTML externes comme en-tête et pied de page dans votre document HTML principal.

Mise en œuvre :

1. Index.html :

   • Ajouter le jQuery bibliothèque.
   • Définissez des balises de script pour charger header.html et footer.html à l'aide de la fonction load().
   • Créez un espace réservé
     éléments pour l'en-tête et le pied de page, avec des identifiants uniques.

   • Header.html et Footer.html :

     • Contient le contenu HTML nécessaire pour l'en-tête et le pied de page, respectivement.

   • Utilisation :

     • Accédez à index.html et observez le contenu de l'en-tête et du pied de page chargé.

   Exemple Code :

   Index.html :

   
   ...
   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
   </script>
   <script> 
   $(function(){
     $("#header").load("header.html"); 
     $("#footer").load("footer.html"); 
   });
   </script> 
   ...
   
   
   <div>
   <p><strong>En-tête.html et pied de page.html :</strong></p>
   <pre class="brush:php;toolbar:false"><a href="http://www.google.com">click here for google</a>

   En incorporant cette approche basée sur JavaScript, vous pouvez efficacement inclure des pages d'en-tête et de pied de page communes dans vos documents HTML, améliorant ainsi la réutilisabilité du code et le maintien cohérence sur vos pages Web.