Javascript: append vs appendChild

🙋🏻‍♀️ append 와 appendChild 는 어떻게 다를까?

둘 모두 부모 요소에 자식 요소를 추가하는 메소드! 하지만 다른 점들이 세 개 정도 있다.


💡 append 는 한 번에 여러 개의 자식 요소를, appendChild 는 한 번에 하나의 자식 요소만 추가.

// ParentNode.append();
// Node.appendChild(); 
li.append(span, p, div); 
ul.appendChild(li); 

💡 append 는 DOMString objects 도 추가할 수 있는데, appendChild는 Node object 만 추가 가능. 다시 말해, append 를 쓰면 string 도 추가할 수 있다!

<let div = document.createElement('div'); 
let span = document.createElement('span'); 
div.append('hello', span); // <div>hello<span></span></div>

console.log(div.childNodes); // NodeLost [text, span]

💡 append 는 return 값을 반환하지 않는데, appendChild 는 붙인 Node object 값을 반환한다.