JavaScript는 HTML 형태의 텍스트를 문서 내 지정된 위치에 삽입할 수 있는 insertAdjacentHTML() 메서드를 제공합니다. 이 메서드에서 사용할 수 있는 유효한 위치 값은 다음과 같습니다.
afterbegin – 요소 내부의 첫 번째 자식 앞에 삽입
afterend – 요소 바로 뒤(형제 요소로) 삽입
beforebegin – 요소 바로 앞(형제 요소로) 삽입
beforeend – 요소 내부의 마지막 자식 뒤에 삽입
각 위치 값은 고유한 역할을 가지고 있으며, 상황에 따라 적절한 위치를 선택해 사용해야 합니다. 아래 예제를 통해 주요 위치 값들의 동작 방식을 살펴보겠습니다.
예제 1: afterend 사용하기
다음 예제에서는 insertAdjacentHTML() 메서드와 유효한 위치 값인 afterend를 사용하여 새로운 텍스트를 헤더 요소의 바로 뒤에 배치하고, 그 결과를 출력합니다.
<html>
<body>
<h2 id="H2">Header</h2>
<script>
var ins = document.getElementById("H2");
ins.insertAdjacentHTML("afterend","<p>Tutorix is the best e-learning platform</p>");
</script>
</body>
</html>출력 결과
Header
Tutorix is the best e-learning platform
위 코드에서 afterend를 사용했기 때문에 새 단락은 h2 요소의 내부가 아니라, 해당 요소의 바깥쪽 뒤에 형제 노드로 추가됩니다.
예제 2: beforeend 사용하기
다음 예제에서는 insertAdjacentHTML() 메서드와 유효한 위치 값인 beforeend를 사용하여 새로운 텍스트를 헤더 요소 내부의 마지막에 배치하고, 그 결과를 출력합니다.
<html>
<body>
<h2 id="H2">Header</h2>
<script>
var ins = document.getElementById("H2");
ins.insertAdjacentHTML("beforeend","<p>Tutorix is the best e-learning platform</p>");
</script>
</body>
</html>출력 결과
Header
Tutorix is the best e-learning platform
beforeend는 대상 요소 내부의 마지막 자식 뒤에 콘텐츠를 삽입합니다. 따라서 위 예제에서는 새 텍스트가 h2 요소 안에 포함되어 함께 표시됩니다.
정리
insertAdjacentHTML()은 기존 DOM을 다시 파싱하지 않고도 특정 위치에 HTML을 삽입할 수 있어 성능 면에서 유리합니다. innerHTML처럼 전체 콘텐츠를 덮어쓰지 않기 때문에 기존 요소와 이벤트 리스너가 손상되지 않으며, 동적으로 콘텐츠를 추가할 때 매우 유용하게 활용할 수 있습니다.