DOM으로 HTML 조작하기

입출력 예시가 아래와 같은 함수 test4가 있다.

입출력 예시

let list = [
  { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
  { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' },
];

test4(list);

// --> 'ul#container'가 아래와 같이 변경되어야 합니다.
<ul id="container">
  <li>
    <a class="name">Joe Blow</a>
    <div class="age">42</div>
  </li>
  <li>
    <a class="name">Mary Jenkins</a>
    <div class="age">36</div>
  </li>
</ul>

사원들의 정보를 배열로 입력받아 HTML 엘리먼트의 형태로 변형해서 ul#container에 append 한다.
<a> 요소로 만들어진 사원의 이름을 클릭할 경우, 제공되는 printRole 함수가 실행되어 해당 사원의 role이 콘솔에 출력되어야 한다.

수도코드

//객체배열에서 요소를 반복문으로 훑으면서 아래 내용 실행
//1. li태그 생성
//2. a태그 생성하고 class 추가, 텍스트 내용 추가, li에 append 시키기
//3. div태그 생성하고 class 추가, 텍스트 내용 추가, li에 append 시키기
//4. a태그는 콜백함수 추가시키기
//5. pritRole함수 호출하는 콜백 함수 내용 적기

코드 작성해보기

function printRole(user) {
  // Joe Blow를 클릭하면 clerk 이
  // Mary Jenkins를 클릭하면 manager 가 찍힙니다.
  // 이 함수는 수정하지 마십시오.
  console.log(user.role);
}

function func(arr) {
  // TODO: 여기에 코드를 작성합니다.
  const container = document.querySelector('#container'); //최상단의 태그를 일단 변수로 할당

  for(let i=0; i <arr.length; i++) { 
   
    const li = document.createElement('li');
    container.append(li); //최상단의 태그에 li엘리먼트 append하고

    const name = document.createElement('a');
    name.classList.add("name"); //클래스 추가하고
    name.textContent = `${arr[i].firstName} ${arr[i].lastName}`; // textContent 추가
    name.addEventListener('click', handleUsernameClick); //클릭하면 함수 실행하는 것으로 이벤트리스너 추가

    const age = document.createElement('div');
    age.classList.add("age");
    age.textContent = arr[i].age; //age도 똑같은 과정 반복

    li.append(name,age); //name과 age엘리먼트를 차례대로 append
    
    function handleUsernameClick() {
      printRole(arr[i]) //printRole 함수 실행
    }
    
  
  };
}

여기서 a태그를 클릭할 때 함수가 실행되어져야 하므로name.addEventListener('click', handleUsernameClick);이렇게 표현해보았다. for문 아래쪽에 두고 함수 선언식 형태로 함수를 적어주었다.

또한 handleUsernameClick이라는 함수 내에서 아래와 같이 printRole을 실행시켰는데 그 전달인자로 '객체 한 덩어리'가 들어가므로 arr[i]로 나타내었다.