프로그래밍/JQuery
JQuery로 DOM 다루기 - 요소 포함
하와이블루
2022. 10. 25. 20:15
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 src="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>
</head>
<body>
<div class="content">첫번째 컨텐츠</div>
<div class="content">두번째 컨텐츠</div>
<button>div 요소 추가</button>
</body>
</html>
1. wrap() 적용
$(function(){
$('button').on('click',function(){
$('.content').wrap("<div class='wrapper'><div>"); // 각자 감싼다.
});
});
2. wrapAll() 적용
$(function(){
$('button').on('click',function(){
$('.content').wrapAll("<div class='wrapper'><div>"); // 한번에 감싼다.
});
});
3. wrapInner() 적용
$(function(){
$('button').on('click',function(){
$('.content').wrapInner("<div class='wrapper'><div>"); // 안쪽으로 감싼다.
});
});
728x90