Wie kann ich mit jQuery eine HTML-Datei in eine andere einbinden?

Einbinden von HTML-Dateien in HTML-Dokumente

Bei der HTML-Entwicklung besteht häufig die Notwendigkeit, den Inhalt einer HTML-Datei in eine andere einzubinden. Dies ermöglicht eine modulare Strukturierung und Wiederverwendbarkeit des Codes. Während diese Aufgabe in JavaServer Faces (JSF) mithilfe der Funktion Tag ist ein ähnlicher Ansatz für reine HTML-Dateien erforderlich.

Verwendung von jQuery für die HTML-Inklusion

Eine praktische Lösung für dieses Problem ist die Verwendung von jQuery, einem beliebten JavaScript Bibliothek. Durch die Nutzung der leistungsstarken Funktionen von jQuery können wir den Inhalt einer separaten HTML-Datei dynamisch in das übergeordnete Dokument laden.

HTML-Dateistruktur

Die übergeordnete HTML-Datei (a. html) sollte den folgenden Code enthalten:

<script src="jquery.js"></script>
<script>
    $(function() {
        $("#includedContent").load("b.html");
    });
</script>



<div>
<p>In diesem Code binden wir die jQuery-Bibliothek ein und verwenden den $(function() { })-Wrapper um eine Funktion auszuführen, wenn das DOM bereit ist. Innerhalb dieser Funktion verwenden wir die .load()-Methode von jQuery, um den Inhalt der Datei „b.html“ asynchron in die Datei </p>
<div> zu laden. Element mit der ID „includedContent“.<p><strong>Separate HTML-Datei (b.html)</strong></p>
<p>Die enthaltene HTML-Datei (b.html) enthält den Inhalt, den wir einbinden möchten in die übergeordnete Datei:</p>
<pre class="brush:php;toolbar:false"><p>This is my include file</p>

Vorteile davon Ansatz

Diese Methode bietet mehrere Vorteile:

• Einfachheit:Es ist ein unkomplizierter und prägnanter Ansatz.
• Saubere Lösung: Es wird vermieden, dass der HTML-Code mit Unnötigem überladen wird Markup.
• Dynamisches Laden: Es lädt den Inhalt asynchron und verhindert so das Blockieren der Seite.

Dokumentation

Für Weitere Informationen zur .load()-Methode von jQuery finden Sie in der offiziellen Dokumentation: jQuery .load() Dokumentation