본문 바로가기

Javascript/DOM과 HTML 제어

append() 와 appendChild()의 차이

반응형

append()와 appendChild() 는 같은 기능을 하는 메서드입니다.

기능이나 확장성에서 append() 가 뛰어나기 때문에 append() 를 사용하는 것이 좋습니다.


두 메서드는 다음과 같은 차이가 있습니다.


차이점 

append()

appendChild() 

타입

자바스크립트 메서드 

DOM 메서드 

추가 노드 갯수 

여러개 허용

나머지 파라메터 사용 가능


엘리먼트.append(...nodes);

1개 

문자열 노드 추가 지원

가능

DOM 문자열, 또는, 태그와 조합해 여러개의 텍스트 노드, 또는 엘리먼트 노드를 여러개 만들 수 있음


엘리먼트.append('문자열');

엘리먼트.append('문자열', p);

노드 객체만 가능 

인터넷 익스플로러

미지원 

지원 

prepend 지원

prepend() 메서드로 자식 끝에 추가 지원

prependChild() 미지원

반환 값

없음(undefined)

추가된 노드 참조 반환 




append() 사용 장점


1. 텍스트 내용이 있는 엘리먼트를 추가할 경우 append()를 사용하면 코드 작성량을 줄일 수 있습니다.


예를 들어보겠습니다.


appendChild() 를 이용하면 아래와 같은 방법으로 대상 노드에, 텍스튼 노드가 들어있는 새로 만든 노드를 추가합니다.


let li = document.createElement('li');
let litext = document.createTextNode('무지');
li.appendChild(litext);
let targetul = document.getElementById('friends');
targetul.appendChild(li);



append() 를 사용하면 


let li = document.createElement('li');
li.append('무지');
let targetul = document.getElementById('friends');
targetul.append(li);


이렇게 텍스트 노르를 생성해 추가하는 과정을 하나로 줄일 수 있습니다.




2. append()는 나머지 파라메터를 지원합니다.

나머지 파라메터를 사용하면 CSS 쿼리 선택자로 선택한 모든 엘리먼트 노드들을 원하는 위치로 옮길 수 있습니다.


let items = document.querySelectorAll('.animal');
document.querySelector('#newfriends').prepend(...items);



반응형

닫기