Como usar la etiqueta template 💻

14 de agosto de 20212 minutos de lectura

Índice

Crear elementos desde javascript dinámicamente con createElement y appendChild y luego insertarlos al documento puede hacernos escribir mucho código, o usar innerHtml nos puede dar problemas de seguridad en nuestra web. Pero afortunadamente existe la etiqueta template que nos ahorrara estos problemas.

¿Qué es?

La etiqueta html <template> es una manera de conservar html sin que se muestre al usuario para usarlo cuántas veces queramos dinámicamente desde javascript.

Como usarla

Se debe colocar el contenido que será usado dentro del elemento template y localizar el contenido de el con javascript. En este caso lo usaremos para colocar elementos dentro de la lista.

1<ul id="list"></ul>
2
3<template id="item">
4  <li>
5    <section>
6      <h2 class="title"></h2>
7      <p class="text"></p>
8    </section>
9  </li>
10</template>

Debemos especificar la propiedad content para usar el contenido que esta dentro de el elemento template que es el que nos interesa, no el elemento en si mismo.

1const list = document.getElementById('list')
2const item = document.getElementById('item').content

Luego el contenido del elemento template se tiene que clonar, se pueden usar estas 2 formas y obtendríamos el mismo resultado.

Con cloneNode:

1const clone = item.cloneNode(true)

Con importNode:

1const clone = document.importNode(item, true)

Y así podemos modificar los elementos localizándolos y posteriormente insertándolos al documento, esto con el fin de agregar la información que queramos, artículos, listas, datos de clientes, etc. De esta forma logramos agregar información dinámicamente con mucho menos código a comparación de crear los elementos desde javascript.

1// Etiqueta h2
2const title = clone.querySelector('.title')
3title.textContent = 'Title 1'
4
5// Etiqueta p
6const text = clone.querySelector('.text')
7text.textContent = 'Lorem ipsum dolor sit amet'
8
9// Agregar a la lista
10list.appendChild(clone)

Código de ejemplo usando `fragment`

También podemos usar el elemento template en conjunto de fragmentos y obtener un mejor rendimiento.

1<ul id="list"></ul>
2
3<template id="item">
4  <li class="list__item">
5    <section class="card">
6      <h2 class="card__title"></h2>
7      <p class="card__text"></p>
8    </section>
9  </li>
10</template>

1const list = document.getElementById('list')
2const itemTemplate = document.getElementById('item').content
3
4// Se crea un fragmento
5const fragment = document.createDocumentFragment()
6
7const items = [
8  { title: 'Title 1', text: 'Lorem ipsum dolor sit amet' },
9  { title: 'Title 2', text: 'Lorem ipsum dolor sit amet' },
10]
11
12// Itera el array de objectos
13items.forEach((item) => {
14  // Clona el contenido del template
15  const clone = itemTemplate.cloneNode(true)
16
17  const title = clone.querySelector('.card__title')
18  title.textContent = item.title
19
20  const text = clone.querySelector('.card__text')
21  text.textContent = item.text
22
23  // Agrega el elemento al fragmento
24  fragment.appendChild(clone)
25})
26
27// Luego que agregar todos los elementos al fragmento, se agrega este a la lista
28list.appendChild(fragment)

Índice

¿Qué es?

Como usarla

Código de ejemplo usando fragment

Código de ejemplo usando `fragment`