Gemeinsamer HTML-Code auf unterschiedlichen Seiten
Typischerweise ist das Navigationsmenü und der Footer auf allen Seiten gleich. Wenn diese Elemente angepasst werden, muss die Anpassung auf allen Seiten durchgeführt werden, was nicht nur einfach mühsam, sondern auch fehleranfällig ist.
Sinnvollerweise werden diese Teile in separaten Dateien gepflegt. Dafür gibt es verschiedene Möglichkeiten. Eine davon ist die Inhalte dynamisch mit JavaScript einzufügen. Diese Möglichkeit wird hier aufgezeigt
Vorbereitungen
Im <head>-Bereich jeder Seit muss das Script eingebunden werden:
<script src="common.js"></script>
Die HTML-Elemente, die gemeinsamen HTML-Code beinhalten (z.B. <nav>….</nav>), müssen mit einer eindeutigen id versehen werden:
<nav id="mein_nav_menu"> <--! Wird durch das Script automatisch befüllt. Allfälliger Inhalt wird überschrieben --> </nav>
Das Script
Und schliesslich das Script, das die Codes einfügt:
- common.js
window.addEventListener('load', function() { // Erst starten, wenn das ganze Dokument geladen ist. function insertHTML(id, html) { // Funktion, die den HTML-Code in das Element mit id einfügt let el = document.getElementById(id); if (el) { // Nur, wenn es ein solches Element auch gibt el.innerHTML = html; } } // Gebrauch der Funktion: (Text zwischen Backticks, rückwärts gerichtete Apostrophs: `bla`) insertHTML(`mein_nav_menu`, `<ul> <li><a href="index.html">Home</a></li> <li><a href="news.html">News</a></li> </ul>`); // Beachten Sie den schliessenden Backtick und die schliessende Klammer der Funktion // Funktion kann mehrfach verwendet werden: insertHTML(`mein_footer`, `Das ist mein footer! <i>Proudly made by typing HTML-Code ;-)</i>`); });