Atomic Habits

[Javascript] append vs appendChild 차이점 본문

IT/JavaScript-JQuery

[Javascript] append vs appendChild 차이점

체계성 2022. 6. 6. 18:03
https://webruden.tistory.com/634
 

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

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에

webruden.tistory.com

 

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
 

 

'IT > JavaScript-JQuery' 카테고리의 다른 글

IE11을 이용한 JavaScript 디버깅  (0) 2022.06.17
callback / function / thisArg : example  (0) 2022.06.12
[JavaScript] 깊은 복사, 얕은 복사 - 재귀함수  (0) 2022.06.06
for / for-in / forEach / for-of 무엇으로 자바스크립트 리스트를 돌아야 하나  (0) 2022.06.01
forEach, for in, for of 특징 및 성능 비교  (0) 2022.06.01
'IT/JavaScript-JQuery' Related Articles more
Comments