Convertir una matriz en una lista HTML

Introducción

En este laboratorio, exploraremos cómo convertir una matriz en una lista HTML utilizando JavaScript. El objetivo de este laboratorio es ayudarte a entender cómo utilizar Array.prototype.map() y Document.querySelector() para crear una lista de etiquetas HTML y agregarlas a una lista existente en tu página web. Al final de este laboratorio, tendrás una mejor comprensión de cómo manipular el DOM utilizando JavaScript y crear contenido HTML dinámico.

Convertir una matriz en una lista HTML

Para comenzar a codificar, abre la Terminal/SSH y escribe node.

Esta función convierte los elementos de la matriz dada en etiquetas <li> y los agrega a la lista con el id dado.

Utiliza Array.prototype.map() y Document.querySelector() para generar una lista de etiquetas HTML.

const arrayToHTMLList = (arr, listID) =>
  (document.querySelector(`#${listID}`).innerHTML += arr
    .map((item) => `<li>${item}</li>`)
    .join(""));

Uso de ejemplo:

arrayToHTMLList(["item 1", "item 2"], "myListID");

Resumen

¡Felicidades! Has completado el laboratorio de convertir una matriz en una lista HTML. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.