append vs appendChild

7396 단어 JavaScriptJavaScript

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));

좋은 웹페이지 즐겨찾기