티스토리 뷰

Javascript

[JavaScript] append()와 appendChild()의 차이

개발 집사 2022. 3. 4. 15:22

append()와 appendChild() 는 부모 노드에 자식 노드를 추가하는 메서드로 같은 기능을 하지만 몇 가지 차이점이 있습니다.

 

1. append()

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

Node object 사용 예시

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

parent.append(child)

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

문자열(DOMString) 사용 예시

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

parent.append('child')

// 결과
// <div>child</div>

 

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

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

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

// 결과
<body>
    <div>
        <span>
        	<p>
            </p>
            hello 
        </span>
    </div>
</body>

2. appendChild()

appendChild는 오로지 노드 객체(Node object)만 사용할 수 있습니다. 또한 노드에 하나의 노드만 추가할 수 있습니다.

Node object 사용 예시

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

parent.appendChild(child)

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

문자열(DOMString) 사용 예시

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

parent.appendChild('child')

// 결과
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.


// ↓↓↓↓↓ appendChild에 텍스트 추가하는 방법 ↓↓↓↓↓

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

parent.appendChild(child)

// 결과
// <div>childText</div>

 

3. 정리

차이점 append() appendChild()
타입 JavaScript 함수 DOM 함수
노드 객체(Node object) 지원 O O
DOMString(text) 지원 O X
추가 노드 갯수 복수 단일
인터넷 익스플로러 미지원 지원
prepend 지원 prepend() 메서드로 자식 끝에 추가 지원 prependChild() 미지원
반환 값 없음(undefined) 추가된 노드 참조 반환

 

'Javascript' 카테고리의 다른 글

[JavaScript] 변수와 배열 값 바꾸기 – swap  (0) 2025.04.07
[JavaScript] 문자열 길이 기준으로 정렬하기 - sort  (0) 2025.04.07
즉시실행 함수 IIFE  (0) 2022.04.07
[Javascript] <form>, <input> 동적 생성  (0) 2022.03.03
[Javascript] Post 방식으로 데이터 전송  (0) 2022.03.03