appendChild vs insertAdjacentHTML ver.ChatGPT

appendChild와 insertAdjacentHTML은 모두 JavaScript에서 HTML 요소를 문서에 추가하는 데 사용되지만, 각각의 작동 방식과 사용 목적이 다릅니다.

appendChild

appendChild는 DOM 노드(DOM Node)를 특정 부모 요소의 자식 요소로 추가할 때 사용됩니다.

특징:

1. 노드(Node) 단위로 작동:
   • appendChild는 HTML 문자열이 아닌 DOM 노드를 매개변수로 받습니다. 따라서 새 요소를 추가하려면 먼저 document.createElement() 또는 document.createTextNode() 등을 사용해 노드를 생성해야 합니다.
2. 마지막 자식으로 추가:
   • appendChild를 사용하면 지정된 부모 요소의 마지막 자식으로 추가됩니다.
3. 기존 노드 이동 가능:
   • appendChild는 기존 DOM 노드를 다른 위치로 이동시킬 수도 있습니다. 이미 존재하는 노드를 다른 부모의 자식으로 추가하면, 기존 위치에서 제거되고 새 위치로 이동합니다.

사용 예시:

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '새로운 요소입니다.';
parentElement.appendChild(newElement);

 

위 코드에서는 newElement라는 새로운 div 요소를 만들어 parentElement의 자식으로 추가합니다.

insertAdjacentHTML

insertAdjacentHTML은 HTML 문자열을 특정 위치에 삽입할 때 사용됩니다.

특징:

1. HTML 문자열을 그대로 삽입:
   • insertAdjacentHTML은 HTML 문자열을 매개변수로 받으며, 이 문자열을 파싱하여 DOM에 삽입합니다. 삽입된 문자열은 실제 DOM 노드로 변환됩니다.
2. 위치 지정 가능:
   • insertAdjacentHTML은 삽입할 위치를 정할 수 있는 네 가지 옵션을 제공합니다:
     • beforebegin: 요소의 바로 앞에 삽입
     • afterbegin: 요소의 첫 번째 자식으로 삽입
     • beforeend: 요소의 마지막 자식으로 삽입
     • afterend: 요소의 바로 뒤에 삽입
3. 성능 면에서 유리:
   • HTML 문자열을 한 번에 삽입하므로 많은 요소를 추가할 때 성능이 더 좋습니다.

사용 예시:

JS

const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', '<div>새로운 요소입니다.</div>');

 

위 코드에서는 parentElement의 마지막 자식 위치에 새로운 div 요소를 HTML 문자열로 추가합니다.

차이점 요약

기능
appendChild vs insertAdjacentHTML

입력 유형	DOM 노드	HTML 문자열
삽입 위치	부모 요소의 마지막 자식	요소의 앞/뒤 또는 자식의 시작/끝 위치 선택 가능
성능	요소 하나씩 추가할 때 유리	여러 요소를 한 번에 추가할 때 유리
유효성 검사	직접 생성한 DOM 노드이므로 JavaScript가 안전성 보장	HTML 문자열 그대로 삽입되므로 주의 필요
기존 요소 이동	기존 노드를 이동 가능	기존 요소를 이동할 수 없음

결론

• **appendChild**는 이미 생성된 DOM 노드를 특정 위치에 추가하거나 이동할 때 사용합니다.
• **insertAdjacentHTML**은 HTML 문자열을 빠르게 삽입하여 새로운 요소를 추가하고자 할 때 유용합니다.

어떤 것을 사용할지는 상황과 필요에 따라 다르며, 단순히 새로운 요소를 추가할 때는 insertAdjacentHTML이, 동적으로 DOM 노드를 조작하거나 이동할 때는 appendChild가 적합할 수 있습니다.