둘 다 부모 노드에 자식 노드를 추가하는 메서드이지만 차이가 존재한다
append()
노드 객체(Node object)나 DOMString(text)를 사용할 수 있고
한번에 여러 개 의 자식 요소 설정 가능
return 값을 반환하지 않음
- Node object 사용 예시
const div = document.createElement('div')
const p = document.createElement('p')
div.append(p) // <div><p></p></div>- 문자열(DOMString)사용 예시
const div = document.createElement('div')
div.append('예시') // <div>예시/div>- 여러 개의 자식 요소 설정 예시 & 리턴값 반환 x
const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')
document.body.append(div, 'hello', span, p); // undefined
// 결과
<body>
<div></div>
hello
<span></spen>
<p></p>
</body>
****
console.log(document.body.append(div, 'hello', span, p))//undefined //undefinedappendChild()
오직 노드 객체(Node object) 만 사용할 수 있고
한번에 한 개 의 자식 요소 설정 가능
return 값 반환
- Node object 사용 예시
const div = document.createElement('div')
const p = document.createElement('p')
div.appendChild(p) // <div><p></p></div>- 문자열(DOMString)사용 예시
const div = document.createElement('div')
div.appendChild('문자열')
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.- 리턴값 반환
const div = document.createElement('div')
const span = document.createElement('span')
console.log(document.body.appendChild(div)) //<div></div>| append | appendChild | |
|---|---|---|
| 노드 객체 | o | o |
| 문자열(DOMString) | o | x |
| 다중 값 허용 | o | x |
| return 값 | x | o |
