template für das Rendern mit JavaScript verwenden
Kombinieren Sie Vorlagen mit JavaScript-Schleifen für dynamische Listen
template für das Rendern mit JavaScript verwenden ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das template-Element
Das <template>-Element enthält HTML, das erst gerendert wird, wenn es von JavaScript geklont und eingefügt wurde. Sein Inhalt ist inert – Skripte werden nicht ausgeführt, Bilder nicht geladen und Styles nicht angewendet –, bis das Template aktiviert wird.
Auf den Template-Inhalt zugreifen
Der Template-Inhalt befindet sich in einem DocumentFragment unter template.content. Um ihn zu verwenden, klonen Sie das Fragment: const clone = template.content.cloneNode(true). Das Argument true führt einen tiefen Klon einschließlich aller Nachfahrenknoten durch.
Template-Instanzen rendern
Passen Sie den Klon vor dem Einfügen an: Suchen Sie innerhalb des Klons nach Elementen, legen Sie Textinhalte fest und fügen Sie Event-Listener hinzu. Hängen Sie ihn anschließend an das DOM an: container.appendChild(clone). Jeder Aufruf von cloneNode() erstellt eine unabhängige Kopie – Sie können eine Kopie ändern, ohne die anderen zu beeinflussen.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Listen aus Templates rendern
Kombinieren Sie Templates mit Array.forEach oder Array.map, um Listen zu rendern: Klonen Sie für jedes Element in den Daten das Template, tragen Sie die Werte ein und hängen Sie es an einen Listen-Container an. Dieses Muster ähnelt der Arbeit mit einem Framework, basiert aber auf standardmäßigem HTML und JavaScript.
Template für Tabellenzeilen
Definieren Sie ein <template>, das ein <tr>-Element mit Zellen enthält. Klonen und befüllen Sie es für jede Datenzeile. Dadurch entfällt die String-Verkettung zur HTML-Erzeugung – ein Escaping ist nicht erforderlich, da Sie textContent statt innerHTML setzen.
Template-Aktivierung erfolgt explizit
Templates werden niemals automatisch gerendert. Dadurch eignen sie sich zum Speichern von Fragmenten, die bedingt gerendert werden: Zeigen Sie ein Template für „keine Ergebnisse“ nur an, wenn die Suche leer zurückkehrt, ein Fehler-Template nur bei einem Netzwerkfehler und ein Lade-Skeleton während des Datenabrufs.
Verschachtelte Templates
Ein Template kann andere Templates enthalten – verschachtelte Templates bleiben innerhalb des DocumentFragments des äußeren Templates inert. Dadurch werden komponentenartige Hierarchien ermöglicht, in denen ein äußeres Template zunächst geklont und anschließend innere Templates nach Bedarf aktiviert werden.
Gekapselte Styles in Templates
Styles innerhalb des <style>-Tags eines Templates werden nicht auf das Dokument angewendet – sie bleiben inert, bis das Template instanziiert und sein Inhalt in das aktive DOM verschoben wird. Dadurch können Templates ihre eigenen Styles mitführen, ohne die Seite zu beeinflussen.
template im Vergleich zu innerHTML
Das Parsen mit innerHTML ist eine synchrone Verarbeitung von HTML-Strings – das HTML wird jedes Mal erneut geparst. template.cloneNode() kopiert einen bereits geparsten Baum. Beim wiederholten Rendern derselben Struktur ist das Klonen eines Templates schneller und vermeidet XSS-Risiken durch String-Verkettung.
Einschränkungen der Datenbindung
Das template-Element verfügt über keine integrierte Datenbindung – Sie müssen jeden Klon manuell durchsuchen und befüllen. Für komplexe Anforderungen an die Datenbindung ist ein Framework oder eine Bibliothek besser geeignet. Templates sind für einfache, manuelle Render-Muster ohne den zusätzlichen Aufwand eines Frameworks gedacht.
Browserunterstützung
Das template-Element wird von allen modernen Browsern unterstützt (IE11 bot nur teilweise Unterstützung). Wenn Sie IE-Unterstützung benötigen, können Sie den Template-Inhalt beim Initialisieren per Polyfill parsen. In modernen Projekten verwenden Sie template ohne Polyfill.
Wissensüberprüfung
Warum wird template.content.cloneNode(true) beim wiederholten Rendern gegenüber innerHTML bevorzugt?
Zusammenfassung
Das template-Element enthält inerte, vorgeparste HTML-Fragmente. Durch das Klonen von template.content entstehen unabhängige Instanzen für die manuelle Datenbindung. Zusammen mit dem Setzen von Werten über textContent (ohne XSS) ermöglichen Templates das Rendern von Listen nach dem Muster von Frameworks, bedingte Benutzeroberflächen und wiederverwendbare HTML-Muster – ausschließlich mit standardmäßigen Browser-APIs.
Häufig gestellte Fragen
Ist die Lektion „template für das Rendern mit JavaScript verwenden“ kostenlos?
Ja — der vollständige Text von „template für das Rendern mit JavaScript verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „template für das Rendern mit JavaScript verwenden“?
Kombinieren Sie Vorlagen mit JavaScript-Schleifen für dynamische Listen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „template für das Rendern mit JavaScript verwenden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das template-Element: inaktive Inhalte
- Vorlagen mit cloneNode klonen
- template für das Rendern mit JavaScript verwenden
- Vorlagen gegenüber innerHTML: Sicherheit