append(), appendChild() 메서드를 알아보자.

자바스크립트로 html 태그를 생성해서 어떤 태그에 자식 태그로 넣고자 할때 append(), appendChild() 메서드를 사용합니다. 둘다 부모 태그에 자식 태그를 추가할때 사용하는데 이 두 메서드의 차이점은 뭘까? 궁금했습니다. 완전히 같은 기능과 특징을 가진 메서드가 이름만 다를것이라고 생각하지 않았기 떄문입니다.
그럼 두 메서드의 차이점에 대해서 알아보도록 합시다.

append()

• 부모노드에 자식노드를 추가할 수 있다.
• 한번에 다수의 자식노드를 추가할 수 있다.

const div = document.createElement("div") // div 태그 생성
const span = document.createElement("span") // span 태그 생성
const h1 = document.createElement("h1") // h1 태그 생서
div.append(span, h1);

• 태그의 콘텐츠 값인 문자열을 추가할 수 있다.

const div = document.createElement("div") // div 태그 생성

div.append("hello") // <div>hello</div> 

• undefined 를 반환한다.

appendChild()

• 부모노드에 자식노드로 태그를 추가할 수 있다.
• 한번에 다수의 자식노드를 추가할 수 없다.
• 태그의 콘텐츠 값인 문자열을 추가할 수 없다.
• 추가한 태그를 반환한다.

결론 : 두 메서드의 공통점은 부모 노드에 자식 노드를 추가할 수 있다는 것이고 차이점은
append 메서드는 한번에 다수의 자식 노드를 추가, 태그의 콘텐츠값 추가를 할 수 있고 appendChild 메서드는 불가능하다는 것이다.