자바스크립트 엘리먼트 앞 또는 뒤에 요소 이동하기, append(), appendChild(), prepend(), insertBefore()

Last Modified : 2020-08-07 / Created : 2020-08-07

23,391
View Count

주소 복사하기

자바스크립트를 사용하여 요소를 이동시키는 방법에 대하여 알아보려고 합니다.

# 자바스크립트를 사용하여 엘리먼트 요소 이동 시키는 방법

자바스크립트는 원하는 요소를 이동하기 위해서 아래와 같은 네 가지 함수를 가지고 있습니다.

append(), appendChild()
prepend()
insertBefore()

모두 현재 엘리먼트의 위치를 다른 엘리먼트의 뒤나 앞 등에 위치 시키는 함수들 입니다. 이제 아래에서 하나씩 알아봅니다.

! append(), appendChild() 함수 알아보기
위 두 함수는 특정 엘리먼트의 자식 요소로 추가하는 함수입니다. 이 때 추가된 요소는 맨 뒤에 위치하게 됩니다. 여기서 두 함수는 문법이 조금 다르나 동일하게 동작합니다. 다만 append()의 경우 IE 11에서 동작하지 않으므로 대부분 호환성을 위해 appendChild()를 사용합니다. 이런 이유로 아래에서는 appendChild()의 방법에 대하여 알아봅니다.

엘리먼트.appendChild(이동 할 요소)

간단한 문법은 위와 같습니다. 그럼 간단한 예제를 만들어봅니다. 만약 아래와 같은 태그가 존재하는 경우

div를 p 요소 내부에 추가하기 위해서 appendChild()를 사용할 수 있습니다. 이제 코드를 작성해보겠습니다.

let div_ele = document.querySelector('div');
div_ele.appendChild(p_ele);

코드를 실행하면 아래와 같이 div 태그가 p 태그 내부로 이동하게 됩니다.

여기까지 appendChild()를 사용한 이동 방법에 대하여 알아봤습니다.

! 자바스크립트 prepend() 함수 알아보기

appendChild()에 이어서 이번에는 prepend() 함수를 알아봅니다. prepend()는 appendChild()와 거의 동일하게 동작하며 부모의 자식 요소로 추가되나 그 위치가 맨 뒤가 아닌 맨 앞에 추가되는 것이 다른 점입니다.

엘리먼트.prepend(...이동 할 요소)

문법 역시 거의 동일합니다. 참고로 IE에서는 prepend()가 동작하지 않으니 참고하세요.

! 자바스크립트 insertBefore() 알아보기

마지막으로 insertBefore()에 대하여 알아봅니다. 이 함수 역시 동일하게 선택한 요소의 자식 요소로 추가 할 수 있습니다. 다만 추가적으로 원하는 자식 요소의 앞에 위치하게 됩니다.

엘리먼트.insertBefore(추가 할 요소, 앞으로 이동 할 자식 요소)

위 두 인자는 모두 필수요소입니다. 여기서 앞으로 이동 할 자식 요소 역시 입력이 필요합니다. 만약 null 값을 추가할 경우 맨 뒤에 추가되니 참고하세요.

간단한 예제를 만들어봅니다.

만약 id가 next에 있는 리스트 요소들을 prev에 모두 추가하려면 어떻게 할까요? 아래와 같이 코드를 작성 할 수 있습니다.

moveToPrev = function() {
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');

prev.insertBefore(next.firstChild, prev.firstChild);
}

즉 next의 첫 번째 자식요소를 prev에 이동시키는 함수를 만들었습니다. 코드가 어떻게 동작하는지는 아래에서 확인해보세요. 참고로 next의 li에 또 다른 자식 노드가 존재하므로 두 번 클릭해야 모두 이동하게 됩니다.

@ 코드 직접 동작해보기

<ul id="prev">
<li>1</li>
</ul>
<hr />
<ul id="next">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button onclick="moveToPrev()">Move</button>
<style>
#prev, #next { padding-left : 48px; }
#prev li, #next li { list-style: circle;}
</style>
<script>
moveToPrev = function() {
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');
prev.insertBefore(next.firstChild, prev.firstChild);
}
</script>

next의 자식 요소가 버튼을 누를 때 마다 이동하는 지 잘 확인해보세요.

여기까지 태그 요소를 이동하는 몇 가지 함수들을 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트 형제 요소 중 몇 번째인지 인덱스 값 얻기, index

자바스크립트 fetch API 알아보기