Введение
В этом практическом занятии мы изучим, как с помощью 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, чтобы улучшить свои навыки.