Introducción
La etiqueta <template> en HTML te permite crear contenido reusable que no se renderiza en una página cuando se carga. Esto es útil cuando tienes contenido que no es necesario al comienzo de la carga de la página pero que puede ser accedido más tarde usando JavaScript. Esta práctica te guiará a través de los pasos para crear una plantilla HTML.
Nota: Puedes practicar codificando en
index.htmly aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.
Agregar la etiqueta
En primer lugar, crea un archivo HTML llamado index.html.
Agrega la etiqueta <template> a tu archivo HTML. Esta etiqueta requiere una etiqueta de inicio y una de fin y debe contener el contenido que quieres reutilizar más adelante.
<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
Nota: El atributo id puede ayudarte a referirte a la plantilla más adelante en JavaScript.
Crear un área de marcador de posición
Crea un área vacía donde insertar el contenido de la plantilla. Para hacer esto, utiliza la etiqueta <div> y dale un atributo id.
<div id="placeholder"></div>
Usar JavaScript para renderizar la plantilla
Agrega un bloque de código JavaScript a tu archivo HTML para renderizar el contenido de la plantilla en el área de marcador de posición.
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
Este código primero recuperará la plantilla del HTML utilizando el método getElementById y luego creará un clon de su contenido. A continuación, el contenido se anexará al área de marcador de posición.
Guarda el archivo index.html y úbrelo en un navegador web. Deberías ver que el contenido de la plantilla aparece en el área de marcador de posición.
Resumen
Utilizar la etiqueta <template> de HTML es una forma simple y útil de crear contenido reusable en tus páginas web. Con la ayuda de JavaScript, puedes renderizar dinámicamente el contenido cuando sea necesario. Esto puede ayudar a reducir la redundancia en tu código y hacerlo más fácil de mantener.
index.html.<template> a tu archivo HTML. Esta etiqueta requiere una etiqueta de inicio y una de fin y debe contener el contenido que quieres reutilizar más adelante.<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
id puede ayudarte a referirte a la plantilla más adelante en JavaScript.<div> y dale un atributo id.<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 y luego creará un clon de su contenido. A continuación, el contenido se anexará al área de marcador de posición.index.html y úbrelo en un navegador web. Deberías ver que el contenido de la plantilla aparece en el área de marcador de posición.<template> de HTML es una forma simple y útil de crear contenido reusable en tus páginas web. Con la ayuda de JavaScript, puedes renderizar dinámicamente el contenido cuando sea necesario. Esto puede ayudar a reducir la redundancia en tu código y hacerlo más fácil de mantener.
