Einführung
Das <template>-Tag in HTML ermöglicht es Ihnen, wiederverwendbaren Inhalt zu erstellen, der beim Laden der Seite nicht gerendert wird. Dies ist nützlich, wenn Sie Inhalte haben, die am Anfang des Seitenladens nicht benötigt werden, aber später über JavaScript abgerufen werden können. In diesem Lab werden Sie durch die Schritte zum Erstellen eines HTML-Templates geführt.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
-Tag hinzufügen
Erstellen Sie zunächst eine HTML-Datei namens index.html.
Fügen Sie das <template>-Tag Ihrer HTML-Datei hinzu. Dieses Tag erfordert ein Start- und ein Endtag und sollte den Inhalt enthalten, den Sie später wiederverwenden möchten.
<template id="myTemplate">
<h2>Dies ist ein Template</h2>
<p>Dies ist ein Text, der wiederverwendet werden kann.</p>
</template>
Hinweis: Das id-Attribut kann Ihnen helfen, das Template später in JavaScript zu referenzieren.
Erstelle einen Platzhalterbereich
Erstellen Sie einen leeren Bereich, in den Sie den Inhalt des Templates einfügen werden. Dazu verwenden Sie das <div>-Tag und geben es ein id-Attribut.
<div id="placeholder"></div>
Verwende JavaScript, um die Vorlage zu rendern
Fügen Sie einen JavaScript-Codeblock zu Ihrer HTML-Datei hinzu, um den Inhalt des Templates in den Platzhalterbereich zu rendern.
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
Dieser Code ruft zunächst das Template aus der HTML mithilfe der getElementById-Methode ab und erstellt dann eine Kopie seines Inhalts. Der Inhalt wird anschließend an den Platzhalterbereich angehängt.
Speichern Sie die index.html-Datei und öffnen Sie sie in einem Webbrowser. Sie sollten sehen, dass der Inhalt aus dem Template im Platzhalterbereich erscheint.
Zusammenfassung
Das Verwenden des HTML <template>-Tags ist eine einfache und nützliche Methode, um wiederverwendbaren Inhalt in Ihren Webseiten zu erstellen. Mit Hilfe von JavaScript können Sie den Inhalt dynamisch rendern, wenn er benötigt wird. Dies kann dazu beitragen, Redundanzen in Ihrem Code zu reduzieren und die Wartbarkeit zu erleichtern.
index.html.<template>-Tag Ihrer HTML-Datei hinzu. Dieses Tag erfordert ein Start- und ein Endtag und sollte den Inhalt enthalten, den Sie später wiederverwenden möchten.<template id="myTemplate">
<h2>Dies ist ein Template</h2>
<p>Dies ist ein Text, der wiederverwendet werden kann.</p>
</template>
id-Attribut kann Ihnen helfen, das Template später in JavaScript zu referenzieren.<div>-Tag und geben es ein id-Attribut.<div id="placeholder"></div>
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
getElementById-Methode ab und erstellt dann eine Kopie seines Inhalts. Der Inhalt wird anschließend an den Platzhalterbereich angehängt.index.html-Datei und öffnen Sie sie in einem Webbrowser. Sie sollten sehen, dass der Inhalt aus dem Template im Platzhalterbereich erscheint.<template>-Tags ist eine einfache und nützliche Methode, um wiederverwendbaren Inhalt in Ihren Webseiten zu erstellen. Mit Hilfe von JavaScript können Sie den Inhalt dynamisch rendern, wenn er benötigt wird. Dies kann dazu beitragen, Redundanzen in Ihrem Code zu reduzieren und die Wartbarkeit zu erleichtern.
