23-05-28 T.I.L 바닐라 자바스크립트 append()

문제 설명

$('#cards').append(temp_html)

내가 주로 append 함수를 이용할 때의 코드이다. 이번 과제는 바닐라 스크립트, 즉 사이트에서 만든 코드를 사용하는 것이 아니라 내가 직접 코드를 짜서 요구하는 기능을 구현해야 하는 것이다. ajax를 사용하지 않고 ferch로 데이터를 받아오는 것 까지는 해결했지만 append에 어떤 코드를 사용해서 받아온 데이터를 붙힐 수 있을까?  

시도

구글링을 통해서 append를 어떻게 사용하는지 찾아보았다.

대부분이 $로 append를 사용했다. 그래서 바닐라 스크립트 append를 새로 검색했다.

해결

document.querySelector("#card").append(temp_html)

querySelector가 그 해답이었다. 붙히고자 하는 id에 document.querySelector('#').append()를 통해서 붙힐 수 있었다.

알게된 점

jQuery가 요새 개발자들 사이에서 좋은 취급을 받고 있지 않다는 것을 알았다. jQuery로 짰던 코드가 시간이 지났을 때 작동를 안 했다던가 jQuery회사에서 업데이트가 자주 되지 않는다던가 타 회사에서는 jQuery를 사용하지 않는다던가 했다.

바닐라스크립트는 생소하지만 꾸준히 공부해야할 필요가 있다고 느꼈다. 

 

append()를 jQuery없이 사용 할 수 있게 되었다.