append / appendChild 차이점

자바스크립트를 공부하다가 자식 노드를 추가할 때 사용하는 append, appendChild 이 두 가지의 차이점이 무엇인지 궁금해져서 찾아보았다.

---

append란?

• append 메소드를 사용하면 노드 객체(Node object), DOM String을 추가할 수 있다.
• 한 번에 여러 개의 자식 요소도 추가 가능하다.

위 예시를 보면 span 노드에 Hello world를 추가했고,

일반 스트링 문구로 추가한 Hello world 또한 잘 출력된 모습을 확인할 수 있다.

 

 

 

console.log로 찍어보면

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

 

---

appendChild란?

• append 메소드와 다르게 오직 노드 객체만 추가할 수 있다.
• 오직 하나의 객체만 추가 가능

위 예시를보면 span 노드는 잘 출력된 것을 볼 수 있다.

반면, DOM string 문구는 타입 에러가 나는 것을 확인할 수 있다.

 

 

 

appendChild는 return값으로 엘리먼트요소를 반환한다.