[Javascript] append( ) VS appendChild( )

Append( ) VS AppendChild( )

 

1. append()는 Node Object와 Dom String 을 추가할 수 있지만

  appendChild()는 오직 Node Object만 추가 할 수 있다.

append( )의 경우

appendChild( )의 경우

appendChild( )에서 Dom String 에러 

appendChild()를 이용해 Dom string을 추가하려고 하면 에러가 뜬다. 

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

매개변수의 값이 Node가 아니라고 에러가 뜨는것을 확인 할 수 있었다.

---

2. append()는 값을 반환할 수 없지만 appendChild()는 Node Object를 반환 할 수 있다. 

append( )의 경우_반환 할 수 있는가??!

undefined가 뜬다. 반환하지 못하는걸 확인할 수 있다.

 

 

appendChild()의 경우_반환 할 수 있는가??!?

반환하는것을 확인할 수 있다!!

---

3. append()는 여러개의 값을 함께 추가할 수 있지만

  appendChild()는 오직 한가지의 값만을 추가 할 수 있다. 

append()의 경우_여러 요소를 추가

append(child1,child2,'append입니다'); 

요소들이 모두 잘 추가된 것을 확인할 수 있다. 

 

appendChild()의 경우_여러 요소를 추가. 

appendChild(child1,child2,'appendChild입니다.');

추가가 되긴 하나, 첫번째 요소인 child1만 추가된것을 확인할 수 있다. 

appendChild를 이용해 여러 요소를 한번에 추가하려고 해도, 첫번째 요소만 추가할 수 있다. 

 

 

[ 참고 자료 ]

https://dev.to/ibn_abubakre/append-vs-appendchild-a4m

append VS appendChild