JavaScript에서 특정 위치에 요소 삽입하기: insertAdjacentElement() 메서드 활용법

JavaScript는 이미 존재하는 요소를 원하는 위치에 손쉽게 삽입할 수 있도록 insertAdjacentElement() 메서드를 제공합니다. 만약 동일한 태그 이름을 가진 요소가 여러 개 있다면, 배열의 요소에 접근하듯이 인덱스(index)를 사용하여 해당 요소를 선택할 수 있습니다.

insertAdjacentElement() 문법

node.insertAdjacentElement(position, element);

이 메서드는 두 가지 매개변수를 받습니다.

position: 대상 노드를 기준으로 요소가 삽입될 위치를 지정합니다. 사용 가능한 값은 "beforebegin"(요소 앞), "afterbegin"(요소 내부 첫 번째 자식으로), "beforeend"(요소 내부 마지막 자식으로), "afterend"(요소 뒤) 네 가지입니다.
element: 삽입하고자 하는 기존 DOM 요소를 의미합니다.

예제 1: span1을 헤더 아래로 이동하기

다음 예제에는 span1, span2, header 세 개의 요소가 나란히 존재합니다. insertAdjacentElement() 메서드를 사용하여 span1 요소를 헤더 바로 아래로 이동시켜 보겠습니다.

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[0];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

실행 결과

My span2
My Header
My span1

위 코드에서 document.getElementsByTagName("span")[0]은 첫 번째 span 요소(span1)를 선택합니다. 그런 다음 h.insertAdjacentElement("afterend", s)를 호출하여 해당 요소를 h2 헤더 바로 뒤에 배치합니다. 결과적으로 span1이 헤더 아래로 이동한 것을 확인할 수 있습니다.

예제 2: 인덱스를 활용해 span2 이동하기

이번 예제 역시 span1, span2, header 세 개의 요소가 나란히 존재합니다. 여기서는 insertAdjacentElement() 메서드를 사용해 span2 요소를 헤더 아래로 이동시킵니다. 동일한 태그 이름을 가진 요소가 여러 개일 때는 배열처럼 인덱스를 통해 접근한다는 점에 주목하세요.

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[1];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

실행 결과

My span1
My Header
My span2

이번에는 인덱스 [1]을 사용하여 두 번째 span 요소(span2)를 선택했습니다. 그 결과 span2가 헤더 아래로 이동하고, span1은 원래 자리에 그대로 남아 있는 것을 확인할 수 있습니다.

마무리

insertAdjacentElement() 메서드는 DOM 조작 시 새로운 부모 컨테이너를 만들거나 복잡한 노드 이동 로직을 작성할 필요 없이, 원하는 위치에 기존 요소를 간단하게 배치할 수 있는 강력한 도구입니다. 특히 위치 값을 네 가지로 세밀하게 제어할 수 있어 레이아웃 변경이나 동적 UI 구성에 매우 유용합니다.