바닐라 자바스크립트로 append()함수 구현하기

1. jquery에서의 append()

<div id="test">
  
</div>

이라는 html에서 id가 test인 div에 <h1>안녕하세요</h1>를 출력하고 싶으면?

${"#test"}.append(`<h1>안녕하세요</h1>`)

로 script를 작성해주면 됬다.

2. 바닐라 자바스크립트

바닐라에서는 append()나 appendChild()를 입력하면

Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'.

를 볼 수 있다.

append()와 appendChild()의 경우 둘 다 node 객체에 접근해서 추가하지만

appendChild()의 경우는 오로지 node에 객체로 추가하는 것이다.

그래서

document.querySelector("#test").appendChild(<div></div>)

이런식으로만 작성할 수 있다.

하지만 append()의 경우는 text를 사용할 수 있다.

document.querySelector("#test").append(<div>하이</div>)

라고 작성하면 test의 자식 node에 <div>하이</div>가 추가가 되고 하이가 출력이 된다.

하지만 append()의 경우 동적인 데이터에 추가하기 위하여 다음과 같은 템플릿 리터럴 문법을 쓰면

let 템플릿 = `<div>
${데이터}
</div>`
document.querySelector("#test").append(템플릿)

test의 자식에 <div>${데이터}</div>가 그대로 추가되고 화면에도 <div>가 포함되서 태그 전체가 나오게 된다.

3. 해결법

append()보다 .insertAdjacentHTML("beforeend", 템플릿)으로 작성하면 잘 나오게 된다.

굿굿