insertAdjacentHTML

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%93%B0%EC%A7%80-%EB%A7%90%EA%B3%A0-insertAdjacentHTML-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

🌐 insertAdjacentHTML로 쉽게 append 하자

 

무한스크롤로 데이터를 계속해서 추가해줘야할 일이 있었을 때 배운 방식이다. 

innerHTML로 요소 내에 내용물을 덮어쓰기만 할 줄 알았던 나에겐 굉장히 편리한 문법이었다.

const wrap = document.queryselector('.wrap');
wrap.insertAdjacentHTML('beforeend', data);

 

beforebegin - wrap 바로 앞에 요소 추가

afterbegin - wrap의 첫번째 자식 요소 바로 앞에 요소 추가

beforeend - wrap의 마지막 자식 요소 바로 뒤에 요소 추가 => 무한스크롤 할 때 좋음

afterend - wrap 바로 뒤에 요소 추가