Los motores de procesamiento de Javascript permiten a los desarrolladores procesar datos de Javascript sin procesar en un sitio web, de una manera obstinada. Ejemplos de estos son React , Vue , Ember.js y muchos otros. Sin embargo, estos marcos no son necesarios para representar datos de Javascript en un sitio web.
En este artículo, tomaremos una lista de strings y las convertiremos en un sitio web simple, utilizando nada más que la API de Javascript proporcionada por el DOM y el navegador.
Comenzando con un documento HTML básico: Comencemos creando un documento HTML simple que represente una página en blanco. Ahora, vamos a revisar dos métodos fundamentales definidos por la especificación DOM, necesarios para representar datos de Javascript en el DOM.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Geeks for Geeks</title> </head> <body></body> </html>
Creación de elementos HTML: Primero, tenemos que aprender a crear nuevos elementos HTML. El método document.createElement() crea el elemento HTML especificado por el nombre pasado. En este caso, estamos creando un elemento li , un elemento HTML que representa un elemento de una lista.
const element = document.createElement('li')
Adjuntar elementos HTML: luego, necesitamos un método para adjuntar el elemento recién creado al DOM (oa otros elementos). Para ello, utilizaremos el método node.appendChild(element) , que adjunta un elemento (“ elemento ”) como hijo de otro elemento (“ Node ”).
node.appendChild(element);
Implementación: ahora estamos listos para delinear un algoritmo para representar una lista de Javascript en el DOM.
- Crear un elemento contenedor
- Recorrer los elementos de la lista
- Representar cada elemento en un elemento HTML
- Adjuntar un elemento HTML en el elemento contenedor
- Adjuntar elemento contenedor al DOM
Vamos a crear dos funciones, renderItem y renderList que implementen el algoritmo descrito anteriormente.
Javascript
const renderItem = (item) => {
// Render each item into an HTML Element
const listElement = document.createElement('li');
listElement.innerHTML = item;
return (listElement);
}
const renderList = (element, list) => {
// Create a container element
const listElement = document.createElement('ul');
// Loop through the list items
const completeListElement = list.reduce((listElement, item) => {
// Attach the HTML Element into the container Element
listElement.appendChild(renderItem(item));
return listElement;
}, listElement);
// Attach container element to the DOM
element.appendChild(completeListElement)
}
Ahora podemos llamar a la función renderList con document.body y nuestros datos para representar la lista.
renderList(document.body, ['Item 1', 'Item 2', 'Item 3']);
Ejecutándolo en el HTML: Estamos listos para combinar nuestro javascript con nuestro documento HTML inicial. Ejecute el documento para ver cómo se representan los datos. Experimente cambiando la lista de Javascript para ver cómo se representan los datos cuando recarga la página.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geeks for Geeks</title>
</head>
<body>
<script>
const renderItem = (item) => {
const listElement = document.createElement('li');
listElement.innerHTML = item;
return (listElement);
}
const renderList = (element, list) => {
const listElement = document.createElement('ul');
const completeListElement = list.reduce((listElement, item) => {
listElement.appendChild(renderItem(item));
return listElement;
}, listElement);
element.appendChild(completeListElement)
}
renderList(document.body, ['Item 1', 'Item 2', 'Item 3']);
</script>
</body>
</html>
Salida: Lo siguiente será la salida del ejemplo anterior.
lista renderizada
Conclusión: este artículo explica cómo renderizar datos de Javascript en el DOM sin necesidad de un motor de renderizado elegante o un marco completo. Juega con diferentes valores y escribe diferentes renderItem para representar datos más complejos.