본문 바로가기
Front-end.javascript

[JS]append vs appendChild

by whitedeveloper 2023. 2. 8.

#.append

-append매서드를 활용하면 node object나 DOMString(text)를 사용할 수 있습니다.

-한번에 여러 개의 자식 요소를 설정할 수 있다.

 

node object 예시

const parent = document.createElement('div');
const child = document.createElement('p');

parent.append(child);

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

DOMString 예시

const parent = document.createElement('div');
parent.append('append 예시');

//result
//<div>append 예시<div>

 

#.appendChild()

-append 메서드와는 다르게 오직 node객체만 받을 수 있다.

-한번에 오직 하나의 노드만 추가할 수 있다.

 

node object 예시

const parent = document.createElement('div');
const child = document.createElement('p');

parent.appendChild(child);

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