6/30 TIL

동적으로 생긴 요소에 접근하기

html = `<div class="card-box">
 '''
  <button id="post-modify">수정</button>
  <button id="post-delete">삭제</button>
  <button type="button" class="btn_like" id="likeBtn">
 '''
  `;
  let container = document.querySelector("#detail-list");
  container.innerHTML = html;

• 위의 상황과 같이 동적으로 생긴 요소의 post-delete 에 접근 하기 위해서는
• 렌더링하는 함수를 async/await 으로 순서조정
• innerHTML 이후 렌더링하는 함수 안에서는 접근 가능하므로 작성(모듈화애매)
• 밑 방법처럼 부모요소에 먼저 접근한 후 접근 (일반적)

postList.addEventListener("click", (e) => {
  if (e.target.id == "likeBtn") {
    likeBtn();
  } else {
    // 수정
    modifyPosts(e);
  }
});