[JavaScript/jQuery] 요소 추가, 삭제, 이동
Lpla
·2021. 6. 27. 19:15
반응형에 따라 요소의 위치를 바꾸려고 한다.
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('클릭');
});
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의 위치가 변경되는 것이 확인된다.