[JavaScript] append 와 appendChild 의 차이

append 와 appendChild 모두 부모 노드에 자식 노드를 추가하는 메서드다.

문득 사용하다가 차이점을 정리할 필요가 있어 정리를 해본다.

append()

먼저 append 는 노드 객체(Node object) 나 DOMString(text) 를 사용할 수 있다. 그리고 한번에 여러 개의 자식 요소를 설정할 수 있다.

// Node object 삽입
const parent = document.createElement('div');
const child = document.createElement('p');

parent.append(child);

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

// DOMString 삽입
const parent = document.createElement('div');
parent.append('append 예시');

// 결과
// <div>append 예시</div>

또한 append 는 return 값을 반환하지 않는다.

appendChild()

appendChild 는 노드 객체(Node object) 만을 받을 수 있고, 한번에 하나의 노드만 추가할 수 있다.

// Node object 삽입
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);

// <div><p></p></div>

// DOMString 삽입
const parent = document.createElement('div');

parent.appendChild('텍스트');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

그리고 appendChild 는 return 값을 반환한다.