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

남양주개발자

·

2021. 1. 19. 09:00

728x90
반응형

[자바스크립트] append vs appendChild 차이점 (초간단)

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
반응형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글