[자바스크립트] append()와 appendChild()의 차이

특정 요소에 동적으로 element를 추가하는 코드를 구현하다가
append()와 appendChild()의 차이가 궁금해졌다 🧐

append()와 appendChild()의 공통점

두 메서드는 모두 부모 자식에 자식 노드를 추가하는 메서드이다
차이점이 있다면 자식 노드를 추가하는 방식이라는 점!

📍 appendChild()

먼저 appendChild는 오로지 node객체만 자식 요소로 추가할 수 있다
코드를 통해 상세히 알아보자

const divElem = document.createElement('div')
const pElem = document.createElemment('p')

divElem.appendChild(pElem)'

// 결과 : <div><p></p></div>

위와 같이 appendChild()는 노드에 하나의 노드만 추가할 수 있다

 

📍 append()

반면 append 메서드는 appendChild와 같이 Node 객체로 자식 요소를 설정할 수 있을 뿐만 아니라, text를 사용할 수도 있다

const div = document.createElement('div');
div.append('hi')

// 결과 : <div>hi</div>

위 코드처럼 append()메서드는 노드 객체가 아닌 text 추가가 가능하다

또한 appendChild()와 다르게 append() 메소드는 여러 개의 자식 요소를 추가할 수 있다

const div = document.createElement('div')
const p = document.createElement('p')

document.body.append(div, p, 'hello')

//결과 : <div></div> <p></p> hello