insertAdjacentHTML

vs innerHTML
vs appendChild

innerHTML은 기존 노드 위에 html을 덮어씀. 기존 노드가 아예 변경됨
insertAdjacentHTML은 기존 노드는 그대로 두고 특정 position에 html을 추가함
appendChild도 부모 노드에 자식 노드를 추가하는 방식

• 만약 인자로 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 해당 노드를 현재 위치에서 새로운 위치로 이동시킨다.(만약 인자로 주어진 노드가 이미 부모를 가지고 있다면 우선 그곳에서 삭제되고 새로운 위치로 이동된다. 따라서 문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로부터 지워버릴 필요가 없다.)

 

즉, innerHTML이 실행되면 해당 요소 내 DOM Tree가 초기화되고 추가한 값으로 대체되는 것
이와 달리 insertAdjacentHTML는 이미 추가되어있는 요소들을 다시 파싱하지 않는다는 큰 장점이 있다.

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

출처: https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

 

+) append vs appendChild
append는 node, 문자열 dom 모두 사용할 수 있고, 한 번에 여러 자식 요소를 설정할 수 있다. return 값은 없다. undefined
appendChiled는 node 객체만 추가할 수 있으며 한 번에 하나의 노드만 추가할 수 있다. return 값은 추가된 노드

 

참조:
https://velog.io/@jangws/innerHTML-vs-insertAdjacentHTML-vs-appendChild-%EB%B9%84%EA%B5%90