(번역) append()와 appendChild()의 차이점

핵심 요약

append(): 노드 객체와 문자열 모두를 한 번에 여러 개 추가할 수 있으며, 반환값이 없습니다.

appendChild(): 노드 객체만 추가할 수 있으며, 한 번에 하나씩 추가해야 하고, 추가된 노드 객체를 반환합니다.

이러한 차이점을 이해하고 상황에 맞게 적절한 메서드를 선택하여 사용하시기 바랍니다.

 

---

JavaScript에서 DOM 조작 시, 부모 노드에 자식 노드를 추가하기 위해 append()와 appendChild() 메서드를 사용합니다.

이 두 메서드는 유사한 기능을 하지만, 몇 가지 중요한 차이점이 있습니다.

append()

append() 메서드는 부모 노드의 마지막 자식으로 노드 객체나 문자열(DOMString)을 추가할 수 있습니다.

예시:

// 노드 객체 추가
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// 결과: <div><p></p></div>

// 문자열 추가
const parent = document.createElement('div');
parent.append('Appending Text');
// 결과: <div>Appending Text</div>

 

appendChild()

appendChild() 메서드는 부모 노드의 마지막 자식으로 노드 객체만 추가할 수 있습니다.

예시:

// 노드 객체 추가
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// 결과: <div><p></p></div>

// 문자열 추가 시도
const parent = document.createElement('div');
parent.appendChild('Appending Text');
// 오류 발생: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

 

 

주요 차이점

1. 허용되는 매개변수:
   • append(): 노드 객체와 문자열(DOMString) 모두 추가 가능.
   • appendChild(): 노드 객체만 추가 가능.
2. 반환값:
   • append(): 반환값이 없음(undefined).
   • appendChild(): 추가된 노드 객체를 반환.
3. 여러 항목 추가:
   • append(): 여러 노드와 문자열을 한 번에 추가 가능.
   • appendChild(): 한 번에 하나의 노드만 추가 가능.

예시:

const parent = document.createElement('div');
const child1 = document.createElement('p');
const child2 = document.createElement('span');

// append()를 사용하여 여러 항목 추가
parent.append(child1, child2, 'Hello World');
// 결과: <div><p></p><span></span>Hello World</div>

// appendChild()를 사용하여 여러 항목 추가 시도
parent.appendChild(child1, child2, 'Hello World');
// 결과: 첫 번째 항목만 추가되고 나머지는 무시됨

 

결론

append()와 appendChild()는 모두 부모 노드에 자식 노드를 추가하는 데 사용되지만, 허용되는 매개변수, 반환값, 한 번에 추가할 수 있는 항목 수 등에서 차이가 있습니다.

일반적으로 append()는 더 유연하며, 문자열과 여러 노드를 한 번에 추가할 수 있어 편리합니다.

그러나 특정 상황에서는 appendChild()를 사용하는 것이 더 적합할 수 있습니다.

 

출처: https://dev.to/ibn_abubakre/append-vs-appendchild-a4m