Converter Array para Lista HTML com JavaScript

Introdução

Neste laboratório, exploraremos como converter um array em uma lista HTML usando JavaScript. O objetivo deste laboratório é ajudá-lo a entender como usar Array.prototype.map() e Document.querySelector() para criar uma lista de tags HTML e anexá-las a uma lista existente em sua página web. Ao final deste laboratório, você terá uma melhor compreensão de como manipular o DOM usando JavaScript e criar conteúdo HTML dinâmico.

Convertendo Array para Lista HTML

Para começar a codificar, inicie o Terminal/SSH e digite node.

Esta função converte os elementos do array fornecido em tags <li> e os adiciona à lista com o ID fornecido.

Use Array.prototype.map() e Document.querySelector() para gerar uma lista de tags HTML.

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

Exemplo de uso:

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

Resumo

Parabéns! Você concluiu o laboratório de Array para Lista HTML. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.