[Javascript] append() 와 appendChild() 차이 (+ prepend)

---

목차

 

1. append()

2. appendChild()

3. append() vs appendChild()

4. prepend()

---

 

 

 

 

appen()과 appendChild()는 모두 부모 노드에 자식 노드를 추가하는 메서드이다.

 

 

1. append()

---

const parent = document.createElement('div');
const child = document.createElement('p');
child.append('텍스트1','텍스트2'); // undefined
parent.append(child); // undefined
console.log(parent) // <div> <p>"텍스트 1" "텍스트 2"</p> </div>

우선 append 메소드를 살펴보면, 노드 객체뿐만 아니라 문자열 또한 추가할 수 있다. 또한 한 번에 2개 이상의 자식 노드를 추가할 수 있고, return값을 반환하지 않는다.

 

 

 

 

2. appendChild()

---

const parent = document.createElement('div');
const child = document.createElement('p');
child.appendChild('텍스트1'); // Error : 텍스트 추가 불가능
child.innerText = "텍스트1";
parent.appendChild(child); // <p>텍스트1</p>

appendChild는 노드 객체만 추가할 수 있고, 문자열을 추가하면 에러가 발생한다. 그리고 append와는 다르게 return값을 반환한다. 그 뿐만 아니라, 한번에 2개 이상의 요소를 추가할 수 없다.

 

 

 

const parent = document.createElement('div');
const child = document.createElement('p');
const child2 = document.createElement('p');
child.innerText = "텍스트1";
child2.innerText = "텍스트2";

parent.appendChild(child,child2); // <p>텍스트1</p>
console.log(parent); // <div> <p>텍스트2</p> </div>

이를 살펴보면 appendChild에 인자를 2개 넣어도 첫번째 인자만 부모 노드에 추가되었다는 걸 알 수 있다.

 

 

 

 

 

3. 차이점

---

1. append는 노드 객체와 문자열 모두 추가할 수 있는 반면, appendChild는 노드 객체만 추가 가능하다.

2. append는 한번에 여러개의 자식 노드를 추가할 수 있지만, appendChild는 한번에 한 개만 가능하다.

3. append는 return값이 존재하지 않지만, appendChild는 return값이 존재한다.

 

 

 

 

4. prepend, after, before

---

1. prepend

append는 선택한 요소 내부 맨 뒤에 추가가 되지만 prepend는 맨 앞에 추가가 된다. 또한 append와 같이 문자열, 요소 추가가 가능하다.

 

 

 

2. after

after는 선택한 요소 바로 뒤에 추가된다.

 

 

 

3. before

before는 선택된 요소 앞에 삽입해준다

 

 

 

 

정리

차이점	append()	appendChild()
타입	자바스크립트 메서드	DOM 메서드
추가 노드 갯수	여러개 허용 나머지 파라메터 사용 가능 엘리먼트.append(...nodes);	1개
문자열 노드 추가 지원	가능 DOM 문자열, 또는, 태그와 조합해 여러개의 텍스트 노드, 또는 엘리먼트 노드를 여러개 만들 수 있음 엘리먼트.append('문자열'); 엘리먼트.append('문자열', p);	노드 객체만 가능
인터넷 익스플로러	미지원	지원
prepend 지원	prepend() 메서드로 자식 끝에 추가 지원	prependChild() 미지원
반환 값	없음(undefined)	추가된 노드 참조 반환