[JavaScript] append와 appendChild 차이점

바닐라 자바스크립트를 복습하면서 투두리스트를 구현중이다.

할일을 input value로 불러와서 추가를 해야하는데,

새로운 tag요소를 만들어 부모의 태그에 자식태그로 넣으려고 하는 중 append, appendChild 두개의 차이가 궁금해졌다.

 

 

append, appendChild의 공통점

두 메소드는 부모 노드에서 자식 노드를 추가하는 것이다.

 

 

append

• 노드 객체를 사용할 수 있다.
• text를 사용할 수 있다.
• 한번에 여러 자식들을 추가할 수 있다.
• return 값을 반환하지 않는다.

const parent = document.getElementsByTagName("body")[0];
const child1 = document.createElement("p");
const child2 = document.createTextNode("Hello, world!");

parent.append(child1, child2);

 

 

 

appendChild

• 노드 객체만 받을 수 있다.
• 하나의 노드만 추가가 가능하다.
• text를 사용할 수 없다.
• return 값을 반환한다.

const parent = document.getElementsByTagName("body")[0];
const child = document.createElement("p");

parent.appendChild(child);

 

 

 

append와 appendChild를 정리하면서 append가 더욱 편리하고 확장성이 높아서 append를 더 많이 사용할 것 같다.