appendChild vs insertAdjacentHTML

appendChild 와 .insertAdjacentHTML 의 차이는 뭐야?

 

 

 

appendChild와 .insertAdjacentHTML은 모두 DOM 요소에 새로운 콘텐츠를 추가하는 데 사용되지만, 몇 가지 중요한 차이점이 있습니다.

1. 추가 방식:

• appendChild: DOM 노드 객체를 인자로 받아 부모 요소의 마지막 자식으로 추가합니다.
• insertAdjacentHTML: HTML 문자열을 인자로 받아 지정된 위치에 HTML 코드로 삽입합니다.

2. 삽입 위치:

• appendChild: 항상 부모 요소의 마지막 자식으로 추가됩니다.
• insertAdjacentHTML: 두 번째 인자로 삽입 위치를 지정할 수 있습니다.
  • 'beforebegin': 요소 앞에 삽입
  • 'afterbegin': 요소 내부의 시작 부분에 삽입
  • 'beforeend': 요소 내부의 끝 부분에 삽입
  • 'afterend': 요소 뒤에 삽입

3. 성능:

• appendChild: 일반적으로 insertAdjacentHTML보다 성능이 좋습니다. 특히 많은 요소를 추가할 때 성능 차이가 커질 수 있습니다.
• insertAdjacentHTML: HTML 문자열을 파싱하고 DOM 노드를 생성해야 하므로 appendChild보다 성능이 떨어질 수 있습니다.

4. 사용 시점:

• appendChild: DOM 노드 객체를 이미 가지고 있거나, 동적으로 생성한 경우에 사용합니다.
• insertAdjacentHTML: HTML 문자열을 직접 작성하여 추가해야 하는 경우에 편리합니다.

5. 기존 콘텐츠 영향:

• appendChild: 기존 콘텐츠에 영향을 주지 않고 새로운 요소를 추가합니다.
• insertAdjacentHTML: 삽입 위치에 따라 기존 콘텐츠를 덮어쓸 수 있습니다. 특히 innerHTML처럼 요소 **내부의 시작 부분('afterbegin')**이나 **끝 부분('beforeend')**에 삽입할 때 주의해야 합니다.

적절한 사용 예시:

• appendChild:
  • 동적으로 생성한 DOM 요소를 추가할 때
  • 기존 요소를 다른 부모 요소로 이동시킬 때
  • 복잡한 HTML 구조를 추가하지 않고 단순한 요소를 추가할 때
• insertAdjacentHTML:
  • 서버에서 받아온 HTML 문자열을 특정 위치에 삽입할 때
  • HTML 템플릿 문자열을 사용하여 동적으로 콘텐츠를 생성하고 추가할 때
  • 복잡한 HTML 구조를 특정 위치에 삽입해야 할 때

결론:

appendChild와 insertAdjacentHTML은 각각 장단점이 있으며, 상황에 따라 적절하게 선택하여 사용해야 합니다. 일반적으로 성능이 중요하거나 단순한 요소를 추가할 때는 appendChild를 사용하고, 복잡한 HTML 구조를 특정 위치에 삽입해야 할 때는 insertAdjacentHTML을 사용하는 것이 좋습니다.