JavaScript 로 배열을 HTML 목록으로 변환하는 방법

소개

이 랩에서는 JavaScript 를 사용하여 배열을 HTML 목록으로 변환하는 방법을 살펴봅니다. 이 랩의 목적은 Array.prototype.map()과 Document.querySelector()를 사용하여 HTML 태그 목록을 생성하고 웹 페이지의 기존 목록에 추가하는 방법을 이해하도록 돕는 것입니다. 이 랩을 마치면 JavaScript 를 사용하여 DOM 을 조작하고 동적 HTML 콘텐츠를 생성하는 방법에 대한 이해도가 높아질 것입니다.

배열을 HTML 목록으로 변환하기

코딩을 시작하려면 터미널/SSH 를 실행하고 node를 입력하십시오.

이 함수는 주어진 배열 요소를 <li> 태그로 변환하고 주어진 ID 를 가진 목록에 추가합니다.

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 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.