검색 결과가 없을 때

일치하는 항목이 없을 경우 아래와 같이 결과가 없다는 문구가 담긴 영역이 추가되도록 하였는데,

결과가 없을 때마다 추가되어 계속 쌓이게 됐다...

 

결과 화면

 

한 번만 추가되어야 하는 영역이라 어떻게 체크해야 할지 고민했는데,

querySelector로 조회했을 때 없으면 null 값이 나와서 if 문에 넣어서 해결했다.

if(!document.querySelector('.no-data')){
  const noDataDiv = document.createElement('div');
  noDataDiv.className = "no-data";
  noDataDiv.innerText = '검색 결과가 없습니다.';
  $movieBox.append(noDataDiv);
}