바닐라 자바스크립트로 코딩을 할 때마다 literal template을 쓰지 않는다면 보통 이 두 개념을 사용하여 DOM을 조작하게 된다. 쓰면서 헷갈리면 바로 정리하고 싶어지는 개념이 있고, 이상하게 쓸 때마다 헷갈리면서도 쉽사리 공부에 손이 안 가는 개념이 있는데, 이 둘은 후자에 해당한다. (😂) 둘의 차이점은 생각보다 쉽게 이해할 수 있었다. insertAdjacentHTML과 textContent에 대해서도 추가로 알아보았다.

innerHTML과 appendChild

innerHTML은 프로퍼티, appendChild는 메서드

• innerHTML은 보통 DOM.innerHTML = ' ' 형태로 사용하고, appendChild는 DOM.appendChild(' ') 형태로 사용한다.
• innerHTML은 다음과 같은 형태도 가능하다. (값은 DOM'String' - 문자열)

const content = element.innerHTML;

element.innerHTML = htmlString;

innerHTML은 교체, appendChild는 추가

• innerHTML은 말 그대로 내부 HTML을 완전히 교체해버린다.
• 반면 appendChild는 완전한 DOM 객체를 (맨 뒤에) 삽입한다.

innerHTML의 경우, 프로퍼티로 취급하므로 메서드의 인자 또는 다른 변수에 할당할 수 있다. (가끔 유용하다고 한다)

innerHTML이 appendChild보다 빠르다.

• 약 2배 정도의 속도 차이가 난다.
• innerHTML이 아닌 appendChild, removeChild, replaceChild, insertBefore 등의 DOM 컨트롤 메서드를 사용하는 걸 선호할 수도 있다. 하지만 속도가 민감한 작업중이라면 innerHTML의 사용을 고려해보자.

innerHTML은 표준이 아니지만 appendChild는 표준이다.

• innerHTML은 대부분의 브라우저에서 지원하지만 표준은 아니다.
• 반면 appendChild는 표준이다.

그 외 innerHTML 사용 시 유의할 점

• innerHTML을 사용하여 태그 등을 삽입할 때는 반드시 '완전한 문자열을 미리 만든 뒤' 할당해야 한다.
  • 자바스크립트 엔진과 브라우저는 할당된 순간순간마다 HTML을 해석하기 때문에 의도치 않은 결과가 발생할 수 있기 때문이다.
  • 예를 들어, 태그 시작 문자열을 할당하고 += 연산자로 children을 넣은 뒤 닫기 태그를 할당한 경우 - 브라우저에서는 시작 태그를 할당하는 순간에 닫는 태그를 자동으로 생성시켜 원하지 않는 오류가 발생할 수 있다.

insertAdjacentHTML과 innerHTML

• innerHTML보다 DOM을 삽입하려는 위치를 더 세밀하게 다룰 수 있다.

  element.insertAdjacentHTML(position, text);
  
  // position의 예시
  <!-- beforebegin: element 앞에 --> 
  <p>
  <!-- afterbegin: element 안에 가장 처음 child -->
  foo
  <!-- beforeend: element 안에 가장 마지막 child -->
  </p>
  <!-- afterend: element 뒤에 -->

• 이미 사용 중인 element는 다시 파싱하지 않는다. (= element 안에 존재하는 element는 건드리지 않는다)

  • 따라서 DOM을 완전히 교체하는 innerHTML보다 작업을 덜 하고 속도가 빠르다.

• innerHTML의 경우 무거운 HTML 파서를 호출하기도 한다. 따라서 만약 텍스트 노드를 삽입하는 경우에는 textContent를 사용하는 것이 낫다.
  

참고한 링크

innerHTML과 appendChild 비교

[DOM] innerHTML vs insertAdjacentHTML vs appendChild 비교