[javascript] DOM 요소 순서 변경하기
웹 페이지에서 DOM 요소의 순서를 변경하는 것은 JavaScript를 사용하여 동적인 웹 페이지를 만들거나 사용자 인터랙션을 처리하는 데 유용합니다. 이 기사에서는 DOM 요소의 순서를 변경하는 방법에 대해 설명하고, 코드 예제를 통해 실제 구현 방법을 살펴보겠습니다.
목차
DOM 요소 선택
먼저, 순서를 변경할 DOM 요소를 선택해야 합니다. 이를 위해 querySelector나 getElementById와 같은 메서드를 사용하여 해당 요소에 접근할 수 있습니다.
const parent = document.getElementById('parent-element');
const element1 = document.querySelector('#element-1');
const element2 = document.querySelector('#element-2');
순서 변경
DOM 요소의 순서를 변경하려면 insertBefore나 appendChild와 같은 메서드를 사용하여 요소를 새 위치에 삽입해야 합니다.
// element1을 element2 다음으로 이동
parent.insertBefore(element1, element2.nextSibling);
// element2를 parent의 맨 끝으로 이동
parent.appendChild(element2);
예제 코드
아래는 DOM 요소의 순서를 변경하는 간단한 예제 코드입니다.
// HTML
/*
<div id="parent-element">
<div id="element-1">요소 1</div>
<div id="element-2">요소 2</div>
</div>
*/
// JavaScript
const parent = document.getElementById('parent-element');
const element1 = document.querySelector('#element-1');
const element2 = document.querySelector('#element-2');
// element1을 element2 다음으로 이동
parent.insertBefore(element1, element2.nextSibling);
// element2를 parent의 맨 끝으로 이동
parent.appendChild(element2);
이제 위의 코드를 참고하여 웹 페이지에서 DOM 요소의 순서를 변경하는 방법을 익히실 수 있습니다.