티스토리 뷰
[Javascript] append() 와 appendChild() 차이 (+ prepend)
무화과(Fig) 2022. 6. 24. 21:40목차
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) | 추가된 노드 참조 반환 |
'Language > JavaScript' 카테고리의 다른 글
[Javascript] 음식 팁과 총액을 계산하는 문제 (0) | 2022.06.28 |
---|---|
[Javascript] 화살표 함수 (0) | 2022.06.28 |
[JavaScript] for...in문, for...of문, forEach문 (0) | 2022.06.24 |
[Javascript] querySelectorAll (0) | 2022.06.23 |
[Javascript] "use strict" / Strict Mode 란? (0) | 2022.06.23 |
- Total
- Today
- Yesterday
- Target
- 비제어 컴포넌트
- GitHub
- 리액트
- map
- tanstackquery
- Next.js
- js
- 제어 컴포넌트
- 객체
- 취업까지달린다
- 스프린트프론트엔드6기
- currentTarget
- arguments
- react
- javascript
- 배열
- hydrationboundary
- Git
- 프론트엔드
- 코드잇 스프린트
- 코드잇스프린트
- 중급 프로젝트
- innerhtml
- 동기
- html
- 비동기
- rest parameter
- 유사배열객체
- CSS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |