append()와 appendChild()

👉 공통점: append()와 appendChild() 모두 부모노드에 자식노드를 추가하는 메소드

append()

• 노드 객체 추가 가능
• 문자열 추가 가능
• 한번 사용에 여러개의 자식(노드 혹은 문자열)들 추가 가능

const parent = document.createElement("div")
const child = document.createElement("h1")

parent.append(child) // <div><h1></h1></div>

const parent = document.createElement("div")

parent.append("문자열을 넣을 수 있어요") // <div>문자열을 넣을 수 있어요</div>

const parent = document.createElement("div")
const child1 = document.createElement("p")
const child2 = document.createElement("h1")

parent.append(child1, child2, "배고파")
// <div><p></p><h1></h1>배고파</div>

appendChild()

• 노드 객체만 추가 가능 (문자열 넣을 경우 에러 발생)
• 한번에 하나의 자식만 추가 가능

const parent = document.createElement("div")
const child = document.createElement("h1")

parent.appendChild(child) // <div><h1></h1></div>