HTML Vorlagen Definition

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.html programmieren 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.

Skills Graph

Fügen Sie das <template>-Tag hinzu

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.

Erstellen Sie 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>

Verwenden Sie JavaScript, um das Template 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.