====== 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 ''''-Bereich jeder Seit muss das Script eingebunden werden:
Die HTML-Elemente, die gemeinsamen HTML-Code beinhalten (z.B. ), müssen mit einer eindeutigen id versehen werden:
===== Das Script =====
Und schliesslich das Script, das die Codes einfügt:
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`, `
`); // Beachten Sie den schliessenden Backtick und die schliessende Klammer der Funktion
// Funktion kann mehrfach verwendet werden:
insertHTML(`mein_footer`, `Das ist mein footer! Proudly made by typing HTML-Code ;-)`);
});