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

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)	추가된 노드 참조 반환