[Javascript] append vs appendChild 차이점 (초간단)

남양주개발자

2021. 1. 19. 09:00

728x90

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간략하게 다뤄보도록 하겠습니다.

append() ?

append 메서드를 활용하면 노드 객체(Node object)나 DOMString(text)를 사용할 수 있습니다. 또한 한번에 여러 개의 자식 요소를 설정할 수 있습니다.

Node object 사용 예시

// Node object 삽입
const parent = document.createElement('div');
const child = document.createElement('p');

parent.append(child);

// 결과
// <div><p></p></div>

문자열(DOMString) 사용 예시

// DOMString 삽입
const parent = document.createElement('div');
parent.append('append 예시');

// 결과
// <div>append 예시</div>

여러 개의 자식 요소를 설정하는 예시

const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');

document.body.append(div, 'hello', span, p);

// result
<body>
  <div></div>
  hello
  <span></span>
  <p></p>
</body>

append 메서드는 return 값을 반환하지 않습니다.

const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');

console.log(document.body.append(div, 'hello', span, p)); // undefined

appendChild() ?

Node object 사용 예시

appendChild 메서드는 append 메서드와는 다르게 오직 Node 객체만 받을 수 있습니다! 게다가 append는 여러 개의 노드와 문자를 추가할 수 있는 반면에 appendChild 메서드는 한번에 오직 하나의 노드만 추가할 수 있습니다.

// Node object 삽입
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);

// <div><p></p></div>

문자열(DOMString) 사용 예시

appendChild 메서드는 앞에서 설명했듯이 DOMString을 넣을 경우 에러가 발생합니다!

// DOMString 삽입
const parent = document.createElement('div');

parent.appendChild('텍스트');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

appendChild 메서드는 return 값을 반환합니다

const div = document.createElement('div');
const span = document.createElement('span');


console.log(document.body.appendChild(div)); // div(Node object)

정리

	append	appendChild
노드 객체(Node object)	o	o
문자열(DOMString)	o	x
반환값(return)	x	o
다중 값 허용	o	x

728x90

그리드형

저작자표시 비영리 변경금지

'개발 > Javascript' 카테고리의 다른 글

자바스크립트 모바일 키보드 닫는 방법(비활성화) \| Close Mobile Keyboard & Menu on Return (0)	2021.07.25
인터넷 익스플로러에서 자동으로 엣지로 전환하는 방법(Redirect from IE to Edge) (0)	2021.04.15
부모 노드 맨 앞에 요소를 삽입하는 방법 (appendChild 말고! prependChild Javascript) (1)	2021.01.18
자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법 (0)	2021.01.06
[Javascript] for, while 반복문에 async await를 활용해 delay 거는 방법 (0)	2020.11.29