Преобразовать массив в HTML-список

Преобразование массива в HTML-список

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим, как с помощью JavaScript преобразовать массив в HTML-список. Целью этого практического занятия является то, чтобы вы поняли, как использовать Array.prototype.map() и Document.querySelector() для создания списка HTML-тегов и добавления их в существующий список на вашем веб-странице. В конце этого практического занятия у вас будет лучше понимание того, как манипулировать DOM с помощью JavaScript и создавать динамический HTML-контент.

Преобразование массива в HTML-список

Для начала кодирования запустите Терминал/SSH и введите node.

эта функция преобразует элементы заданного массива в теги <li> и добавляет их в список с заданным идентификатором.

Используйте Array.prototype.map() и Document.querySelector() для генерации списка HTML-тегов.

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

Пример использования:

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

Резюме

Поздравляем! Вы завершили практическое занятие по преобразованию массива в HTML-список. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.