T.I.L
23-05-29 T.I.L 바닐라 자바스크립트 append() 2
김민커
2023. 5. 29. 20:46
문제 설명
document.querySelector("#card").append(temp_html)
이 append는 <div></div>같은 태그를 포함해서 append했다.
내가 원한건 태그 안에 있는 내용만 append하는 것이다.
시도
.querySelector()와 append() 함수에 대한 개념을 바로 잡고, 탬플릿에 대한 함수를 찾아봤다.
해결
document.querySelector("#cards-box").insertAdjacentHTML("beforeend", temp_html)
append()는 요소를 추가하는 함수다. 탬플릿만있을 때는 append를 사용해도 어색함 없이 내용을 추가할 수 있었지만
짜여진 html의 css에 탬플릿만 넣기 위해서는 다른 함수가 필요 했다. 그게 바로 insertAdjacentHTML()매서드다.
이 매서드는 시작 태그의 앞, 뒤, 종료 태그의 앞, 뒤에 내용을 추가할 수 있는 함수다. 이를 통해서 태그를 제외한 채로 탬플릿의 내용만을 붙혀넣을 수 있었다.
알게된 점
append()함수를 jQuery로만 사용해서 용도를 오해하고 있었다. insertAdjacentHTML()매서드를 알게되었다.