자바스크립트 append vs appendChild 차이점

JavaScript에서 append()와 appendChild() 함수는 둘 다 DOM(Document Object Model)에서 새로운 요소를 추가하는 메소드입니다. 그러나 두 함수는 약간의 차이점이 있습니다.

 

 

appendChild()

 

appendChild() 함수는 지정된 부모 노드의 자식 노드 리스트의 끝에 새로운 노드를 추가합니다. 예를 들어, 다음과 같이 새로운 p 요소를 body 요소의 마지막 자식으로 추가할 수 있습니다.

 

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

 

appendChild() 함수는 매개변수로 단일 요소를 받습니다. 즉, 매개변수로 전달되는 요소가 하나인 경우에만 작동합니다.

 

append()

 

append() 함수는 지정된 요소의 자식 노드 리스트의 끝에 하나 이상의 노드 또는 DOMString 객체를 추가합니다. 예를 들어, 다음과 같이 새로운 p 요소와 텍스트 노드를 body 요소의 마지막 자식으로 추가할 수 있습니다.

 

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

 

append() 함수는 하나 이상의 매개변수를 받을 수 있으며, 매개변수로 전달된 요소가 DOMString 객체일 경우에도 작동합니다.

 

 

또한, append() 함수는 NodeList 객체와 Array 객체도 매개변수로 받을 수 있습니다. 이 경우 NodeList나 Array 객체에 포함된 모든 노드가 지정된 요소의 자식 노드 리스트에 추가됩니다.

 

var parent = document.getElementsByTagName("body")[0];
var children = document.querySelectorAll("p");
parent.append(...children);

 

위 코드는 body 요소의 마지막 자식 노드 리스트에 모든 p 요소를 추가합니다.

 

결론

 

결론적으로, append() 함수는 appendChild() 함수보다 더 유연하며, 다양한 유형의 매개변수를 받을 수 있습니다. 그러나 appendChild() 함수는 단일 요소를 추가할 때 더 빠르게 작동합니다.

 

자바스크립트 remove vs removeChild 차이점