📋 append와 appendChild의 비교

append와 appendChild 모두 부모 노드에 자식 노드를 추가하는 메소드이다.
언뜻 보면 비슷해보이는 두 메소드, 어떤 차이점이 있을까? 이번 포스팅을 통해 함께 알아보자.

---

📌 1. append

const parent = document.createElement('div');
const child = document.createElement('p');
child.append('텍스트1','텍스트2'); // undefined
parent.append(child); // undefined
console.log(parent) // <div> <p>"텍스트 1" "텍스트 2"</p> </div>

우선 append 메소드를 살펴보면, 노드 객체뿐만 아니라 문자열 또한 추가할 수 있다.
거기다가 한번에 2개 이상의 자식 노드를 추가할 수 있고, return값을 반환하지 않는다.

---

📌 2. appendChild

const parent = document.createElement('div');
const child = document.createElement('p');
child.appendChild('텍스트1'); // Error : 텍스트 추가 불가능
child.innerText = "텍스트1";
parent.appendChild(child); // <p>텍스트1</p>

appendChild는 노드 객체만 추가할 수 있고, 문자열을 추가하면 에러가 발생한다.
그리고 append와는 다르게 return값을 반환한다.

그 뿐만 아니라, 한번에 2개 이상의 요소를 추가할 수 없다.

const parent = document.createElement('div');
const child = document.createElement('p');
const child2 = document.createElement('p');
child.innerText = "나는차일드1";
child2.innerText = "나는차일드2";

parent.appendChild(child,child2); // <p>나는차일드1</p>
console.log(parent); // <div> <p>나는차일드1</p> </div>

이를 살펴보면 appendChild에 인자를 2개 넣어도 첫번째 인자만 부모 노드에 추가되었다는 걸 알 수 있다.

---

📌 3. 차이점

• append는 노드 객체와 문자열 모두 추가할 수 있는 반면, appendChild는 노드 객체만 추가 가능하다.
• append는 한번에 여러개의 자식 노드를 추가할 수 있지만, appendChild는 한번에 한 개만 가능하다.
• append는 return값이 존재하지 않지만, appendChild는 return값이 존재한다.

내 생각엔 기능이나 확장성 면에서 append 메소드가 더 뛰어난 점이 많은 것 같다.