[JavaScript/jQuery] 요소 추가, 삭제, 이동

반응형에 따라 요소의 위치를 바꾸려고 한다.

css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다.

이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다.

 

HTML

<div class="box_wrapper">
  <div class="box box1">1번</div>
  <div class="box box2">2번</div>
  <div class="box box3">3번</div>
</div>

 

CSS

.box_wrapper { margin-top: 100px; font-size: 40px; }
.box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; }
.box1 { background: #dc6851; }
.box2 { background: #dcae51; }
.box3 { background: #dc5180; }

 

1. 요소 이동

1-1. append/appendTo

1번 박스의 위치를 3번 뒤로 이동시키고자 할 때,

제이쿼리의 append/appendTo로 마지막 자식 요소 뒤에 해당 요소를 추가할 수 있다.

 

append

let $box1 = $('.box1');
$('.box_wrapper').append($box1);

 

appendTo

$('.box1').appendTo('.box_wrapper');

 

1-2. prepend/prependTo

마지막 자식 뒤가 아니라 첫번째 자식 앞에 추가할 수도 있다.

 

prepend

let $box3 = $('.box3');
$('.box_wrapper').prepend($box3);

 

prependTo

$('.box3').prependTo('.box_wrapper');

 

1-3. after/inserAfter

자식 요소로 추가하는 방식이 싫다면 요소 바로 뒤에 추가할 수 있다.

 

after

let $box1 = $('.box1');
$('.box3').after($box1);

 

inserAfter

$('.box1').insertAfter('.box3');

 

 

1-4. before/insertBefore

before/insertBefore로 요소 바로 앞에 추가할 수도 있다.

 

before

let $box3 = $('.box3');
$('.box1').before($box3);

 

insertBefore

$('.box3').insertBefore('.box1');

 

 

2. 요소 삭제

요소를 삭제할 때는 remove 혹은 detach를 사용한다

$('.box2').remove();

$('.box2').detach();

remove와 detach의 차이는 재사용할 때 알 수 있다.

remove는 해당 요소의 이벤트를 모두 삭제하지만 detach는 이벤트를 모두 보존한다.

따라서 삭제한 요소를 다시 삽입할 경우 remove는 관련 이벤트가 모두 사라진 상태로 삽입되지만 detach는 이벤트가 여전히 존재하는 상태로 삽입된다.

 

$('.box2').on('click', function(){
  alert('클릭');
});

(좌)remove, (우)detach

 

 

3. 요소 추가

요소를 하나를 더 추가할 때는 특별히 다른 메서드를 사용하는 것이 아니라 clone 메서드로 해당 요소를 복사하여 앞서 배웠던 append 등으로 원하는 곳에 추가하면 된다.

let $box1 = $('.box1').clone();

$('.box_wrapper').append($box1);

 

 

4. 반응형 위치 조절

이제 브라우저의 가로 길이가 600px 이상일 때는 1번 -> 2번 -> 3번 순서로 박스가 정렬되고

599px 이하일 때는 3번 -> 1번 -> 2번 순서로 박스가 정렬되도록 해보겠다.

실제로 이 경우에는 css 미디어쿼리와 flex로 순서를 바꾸는 것이 훨씬 편하고 좋다.

어디까지나 예시를 들기 위해 간단하게 html을 만든 것이다.

 

resonsiveWidth();

function resonsiveWidth() {
  let ww = $(window).width();
  $(window).on('resize', function () {
    ww = $(window).width();

    if (ww < 600) {
      // 599 이하
      mobileBox();
    } else {
      // 600 이상
      pcBox();
    }
  });
}

function mobileBox() {
  let $box3 = $('.box3');
  $('.box1').before($box3);
}

function pcBox() {
  let $box3 = $('.box3');
  $('.box2').after($box3);
}

 

DOM을 확인해보면 box3의 위치가 변경되는 것이 확인된다.