append와 appendChild 모두 부모노드에 자식노드를 추가하는 방법이다.
2개에 차이점을 알아보겠다.
append?
append 활용시 '노드 객체'나 DOMString(text)을 사용할 수 있다. 한 번에 여러개의 자식노드를 설정할 수 도 있따.
🎨 노드 객체"Node Object" 예시)
const parent = document.createElement("div");
const child = document.createElement("span");
parent.append(child);
// <div><span></span></div>🎨 문자열 예시)
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);
<body>
"hello"
<span></span>
<p></p>
</body>
//undefined (append는 return값을 반환하지 않는다.)appendChild()?
append 메서드와는 달리 노드 객체만 받을 수 있다.또한 한 번에 하나의 노드만 추가할 수있다.(문자열 입력은 불가능)
🎨 노드객체"Node Object" 예시)
const parent = document.createElement("div");
const child = document.createElement("p");
parent.appendChild(child);🎨 문자열 추가 불가)
const parent = document.createElement("div");
parent.appendChild("text");
// uncaught TypeError: failed to excute'appendChild' on 'Node':parameter1 is not of type'Node'
: 즉 파라미터값이 텍스트가 아닌 노드여야한다는 뜻.🎨 return 값 반환)
const div = document.createElement("div");
const span = document.createElement("span");
console.log(document.body.appendChild(div));
Front-Dev