Javascript — Templates

Plantillas con Javascript

Alan Badillo Salas
Programacion Holistica
1 min readApr 18, 2019

--

Las plantillas de HTML nos permiten crear interfaces reutilizables que pueden ser definidas dentro del mismo código ahorrando tiempo de construcción respecto a usar elementos DOM de Javascript.

La forma de utilizarlas es definiendo una etiqueta <template> con algún identificador para ubicarla rápidamente, luego mediante document.importNode(template.content, true) podemos crear un clone de DOM de nuestra plantilla para poder usarla como un nodo independiente.

En el siguiente ejemplo, se muestra una plantilla de un formulario que es reutilizada para mostrarse dos veces de forma independiente. Observa que mediante element.querySelector(...) recuperamos los elementos de la plantilla sin la necesidad de usar identificadores para los nodos.

--

--

Alan Badillo Salas
Programacion Holistica

L. Matemáticas Aplicadas UAM-Cuajimalpa. M. en Inteligencia Artificial IPN-CIDETEC. Desarrollador Full Stack MEAN/MERN. Data Scientist.