Wie kann ich mit JavaScript wiederverwendbare Kopf- und Fußzeilen in HTML erstellen?

Wiederverwendbare Kopf- und Fußzeilendateien für HTML-Seiten erstellen

Einführung:

Im Bereich der Webentwicklung ist dies häufig der Fall Es ist von Vorteil, wiederverwendbare Elemente wie Kopf- und Fußzeilen zu erstellen, die nahtlos über mehrere HTML-Seiten hinweg integriert werden können. Diese Vorgehensweise rationalisiert nicht nur die Wartung, sondern sorgt auch für Konsistenz und Effizienz.

Lösung mit JavaScript:

Um das Problem zu beheben, können Sie die Leistungsfähigkeit von JavaScript, insbesondere jQuery, nutzen . Mithilfe der Funktion „load()“ können Sie externe HTML-Dateien dynamisch als Kopf- und Fußzeile in Ihr Haupt-HTML-Dokument laden.

Implementierung:

1. Index.html:

   • JQuery hinzufügen Bibliothek.
   • Definieren Sie Skript-Tags zum Laden von header.html und footer.html mithilfe der Funktion „load()“.
   • Erstellen Sie den Platzhalter
     Elemente für die Kopf- und Fußzeile mit eindeutigen IDs.

   • Header.html und Footer.html:

     • Enthalten den notwendigen HTML-Inhalt für die Kopf- und Fußzeile, bzw..

   • Verwendung:

     • Zugriff auf index.html und Beobachten der geladenen Kopf- und Fußzeileninhalte.

   Beispiel 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>Kopfzeile.html und Fußzeile.html:</strong></p>
   <pre class="brush:php;toolbar:false"><a href="http://www.google.com">click here for google</a>

   Durch die Integration dieses JavaScript-basierten Ansatzes können Sie gemeinsame Kopf- und Fußzeilen effektiv in Ihre HTML-Dokumente integrieren und so die Wiederverwendbarkeit und Wartung des Codes verbessern Konsistenz auf Ihren Webseiten.