El método createElement: crear un elemento

Empecemos a agregar la tarjeta de producto. Si lo hiciéramos directamente en el HTML, agregaríamos otro li con la clase product a la lista. Para hacer lo mismo con JavaScript necesitamos varios pasos. Vamos en orden.

Crear un elemento DOM

Primero crearemos un nuevo elemento de lista, li. Hay varias formas de crear elementos. Usaremos el método createElement() del objeto document. Recibe una cadena con el nombre de la etiqueta y devuelve el elemento DOM creado. Podemos guardarlo en una variable para trabajar con él después:

var card = document.createElement('li');

createElement es un método del objeto document. Crea un elemento para este documento, pero todavía no indica en qué parte del DOM se colocará.

Agregar una clase

Este paso ya lo conoces. Usamos classList del elemento creado:

var card = document.createElement('li');
card.classList.add('card');

Insertar el elemento en el árbol DOM

El elemento recién creado todavía no pertenece al árbol DOM y no aparece en la página. Lo tenemos guardado en una variable. Para mostrarlo, debemos insertarlo en el DOM. Buscaremos un elemento padre en el árbol y colocaremos nuestro elemento dentro de él.

Usaremos el método appendChild() del padre. Recibe un elemento y lo inserta al final del elemento padre. Si la lista ya tiene tres elementos, como en nuestro caso, el que agreguemos con appendChild será el cuarto.

var list = document.querySelector('.cards');
var card = document.createElement('li');
card.classList.add('card');

// Al llamar a este método, el nuevo elemento aparecerá en la página
list.appendChild(card);

Así queda la estructura del DOM después de llamar a appendChild:

<!-- Estado inicial del HTML -->
<ul class="cards">
  <li class="card">Elemento existente</li>
</ul>

<!-- Estado después de llamar a appendChild -->
<ul class="cards">
  <li class="card">Elemento existente</li>
  <li class="card">Elemento agregado</li>
</ul>

También podríamos cambiar el orden: crear el elemento con createElement, insertarlo de inmediato en el padre y después agregarle clases. Sin embargo, trabajar directamente sobre el DOM puede obligar al navegador a recalcular la apariencia de la página. Conviene preparar el elemento antes de insertarlo.

Creemos la tarjeta, agreguemos su clase e insertémosla al final de la lista de productos. Después volveremos a mostrar children en la consola para comprobar que nuestra tarjeta forma parte de la colección. Esta colección se actualiza automáticamente cuando cambia el DOM.