728x90
요소의 포함
wrap()
- 선택한 요소를 포함하는(감싸는) 새로운 요소를 추가
wrapAll()
- 선택한 모든 요소를 포함하는(감싸는) 새로운 요소를 추가
wrapInner()
- 선택한 요소에 포함되는(안쪽) 새로운 요소를 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 포함</title>
<script rc="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<style>
div {margin: 10px;}
.content {border: 3px dotted red;}
.wrapper {border: 3px solid deepskyblue;}
</style>
<script>
$(function(){
$('button').on('click', function(){
// $('.content').wrap("<div class='wrapper'></div>"); //각 div 각자 감쌈
// $('.content').wrapAll("<div class='wrapper'></div>"); //div 한꺼번에 감쌈
$('.content').wrapInner("<div class='wrapper'></div>"); //각각 안쪽으로 감쌈
});
});
</script>
</head>
<body>
<h2>요소의 포함</h2>
<div class="content">첫번째 컨텐츠</div>
<div class="content">두번째 컨텐츠</div>
<button>div 요소 추가</button>
</body>
</html>
요소의 복사
clone()
- 선택한 요소를 복사하여 새로운 요소를 생성(ctrl + c만 한 상태)
- 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이기 때문에 append(), appendTo() 메소드와 같이 사용해야 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 복사</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('button').on('click', function(){
// const firstItem = $('#firstItem').clone();
// $('#list').append(firstItem);
// $('#list').append($('#firstItem').clone()); //append()
$('#firstItem').clone().appendTo('#list'); //appendTo()
});
})
</script>
</head>
<body>
<h2>요소의 복사</h2>
<ul id="list">
<li id="firstItem">첫번째 아이템</li>
<li>두번째 아이템</li>
<li>세번째 아이템</li>
</ul>
<button>아이템 복사</button>
</body>
</html>
요소의 대체
replaceAll()
- 선택한 요소를 지정된 요소로 대체
- 이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열등을 전달 받을 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 대체</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('button').on('click', function(){
$('#firstItem').replaceAll('.item'); //전체 .item을 #firstItem으로 변경
})
})
</script>
</head>
<body>
<h2>요소의 대체</h2>
<ul id="list">
<li class="item" id="firstItem">첫번째 아이템</li>
<li class="item" id="secondItem">두번째 아이템</li>
<li class="item" id="thirdItem">세번째 아이템</li>
</ul>
<button>아이템 대체</button>
</body>
</html>
요소의 삭제
remove()
- 선택한 요소를 DOM 트리에서 삭제
- 삭제되는 요소와 연결된 제이쿼리 데이터나 이벤트 모두 함께 삭제
datach()
- 선택한 요소를 DOM 트리에서 삭제
- 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지
- 반환되는 제이쿼리 객체를 appen(), prepend()와 같은 메소드에 인수로 전달하면 삭제된 요소를 다시 복구할 수 있음
empty()
- 선택한 요소의 자식 요소를 모두 삭제
- remove()나 datach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않음
unwrap()
- 선택한 요소의 부모 요소를 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 삭제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('#removeBtn').on('click', function(){
$('.content').remove('.first, .second'); // 선택한 요소를 DOM 트리에서 삭제
});
let data;
$('#detachBtn').on('click', function(){
data = $('.content').detach(); // 선택한 요소를 삭제
});
$('#restoreBtn').on('click', function(){
$('#container').append(data);
});
$('#emptyBtn').on('click', function(){
$('#container').empty(); // 선택한 요소의 자식 요소를 모두 삭제
});
$('#unwrapBtn').on('click', function(){
$('span').unwrap(); // span 요소의 부모 요소를 삭제
});
})
</script>
</head>
<body>
<h2>요소의 삭제</h2>
<div id="container" style="border: 3px solid deeppink; padding: 5px">
<div class="content first">첫번째 아이템</div>
<div class="content second">두번째 아이템</div>
<div class="content third">세번째 아이템</div>
<div>네번째 아이템</div>
<h4><span>다섯번째 아이템</span></h4>
</div>
<button id="removeBtn">아이템 삭제</button>
<button id="detachBtn">div 요소 삭제</button>
<button id="restoreBtn">div 요소 복구</button>
<button id="emptyBtn">자식 요소 삭제</button>
<button id="unwrapBtn">부모 요소 삭제</button>
</body>
</html>
728x90
'JS > jQuery' 카테고리의 다른 글
| [jQuery] 박스 모델 메소드 (0) | 2022.05.09 |
|---|---|
| [jQuery] 요소의 탐색 (0) | 2022.05.09 |
| [jQuery] jQuery로 DOM 다루기 (0) | 2022.05.09 |
| [jQuery] 메소드 체이닝(method chaining) (0) | 2022.05.09 |
| [jQuery] jQuery 선택자, 메소드 (0) | 2022.05.09 |