appendChild()와 innerHTML 차이

innerHTML은 문자열로 넣어주면 HTML DOM으로 화면에 렌더링된다.

innerHTML은 선택한 태그의 HTML태그 전체를 변경할때 사용을 많이한다.

사용되는 예 ) 화면 렌더링 ( 다른페이지로 이동)

ex) document.querySelector('.app').innerHTML = `<div><h1>Title</h1></div>`

 

appendChild는 노드를 넣어줘야한다.

노드란 HTML Dom을 이야기한다. 문자열을 appendChild에 넣어주면 에러가 난다.

 

appendChild는 선택한 태그에 Element를 계속하여 추가하는 개념이다.

기존 HTML을 유지하고 추가한 태그를 현재 HTML 밑에 추가된다.

사용되는 예 ) 상품추가

ex)

let tempTitle = document.createElement('h1');

tempTitle.textContent = '제목1'

document.querySelector('.app').appendChild(tempTitle);

 

그냥 되는데로 혼용해서 사용하다보니 뇌가 절여지면 헷갈릴때가 간혹 있어서 참고용으로 정리를 해보았다.