Si te interesa escribir código optimizado, podrías hacerlo también mediante el uso de DocumentFragment
. Al final de la respuesta pongo algunas cosas sobre esta propiedad del DOM, porque me parece que es una gran desconocida, siendo que debería ser la herramienta ideal para añadir contenido masivo en el DOM.
Por ejemplo:
/*Set de datos de ejemplo*/
var datos = [
{
name: "Pedro",
address: {street:"1st Street", city:"New York"}
},
{
name: "Marta",
address: {street:"2nd Street", city:"París"}
},
{
name: "Juan",
address: {street:"3th Street", city:"London"}
}
]
var resultado = document.getElementById('oneTable');
var fragment = document.createDocumentFragment();
/*OJO: Esto se definía N veces en el bucle*/
var clases = ['colorNombre', 'colorDireccion', 'colorCiudad'];
for(let item of datos) {
var tr = document.createElement('tr');
var tds = [item.name, item.address.street, item.address.city];
for(var i = 0; i < tds.length; ++i) {
var td = document.createElement('td');
td.setAttribute('class', clases[i]);
/*createTextNode es más seguro para agregar contenido*/
td.appendChild(document.createTextNode(tds[i]));
tr.appendChild(td);
fragment.appendChild(tr);
}
}
/*
Agregamos el fragmento al elemento del DOM
al salir del bucle, de modo que el DOM
se renderizará una sola vez, no N veces
*/
resultado.appendChild(fragment);
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"/>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="oneTable">
<thead>
<tr>
<th>Name</th>
<th>Street</th>
<th>City</th>
</tr>
</thead>
</table>
Un gran desconocido
En la web, incluyendo nuestro querido Stackoverflow.es, cada vez que se trata de crear elementos del DOM en bucles, lo que se suele ver es código basado en una práctica no recomendada que consistiría en hacer append de esos elementos directamente en el DOM dentro del bucle.
Quienes programan con tal ingenuidad ignoran que la modificación del DOM tiene una precio. Cada vez que haces append
dentro de un bucle significa que el DOM se va a renderizar N
veces. Por tanto, si el bucle tiene mil elementos, habrá mil renderizaciones del DOM. Hay prácticas peores, que hacen varios append
dentro de un mismo bucle, multiplicando las N
renderizaciones por esa cantidad de append
.
Hay un gran olvidado para estos casos, se llama createDocumentFragment()
, el cual, según MDN:
Crea un nuevo DocumentFragment vacio, dentro del cual un nodo del
DOM puede ser adicionado para construir un nuevo arbol DOM fuera de
pantalla.
DocumentFragment son Nodos del DOM que nunca forman parte del arbol
DOM. El caso de uso más común es crear un document fragment, agregar
elementos al document fragment y luego agregar dicho document fragment
al arbol del DOM. En el arbol del DOM, el document fragment es
remplazado por todos sus hijos.
Dado que el document fragment es generado en memoria y no como parte
del arbol del DOM, agregar elementos al mismo no causan reflow
(computo de la posicion y geometria de los elementos) en la pagina.
Como consecuencia, usar document fragments usualmente resultan en
mejor performance.
PD
He introducido algunas mejoras en el código, sin detenerme a analizar la forma de leer los datos en el objeto. En ese sentido la respuesta de @VRoxa parece ser más simple.
La intención de mi respuesta es mostrar un ejemplo de uso de DocumentFragment
, según la petición de @JuanRivera en su comentario.
tr
por cada elemento del arraydatos
?