반응형
기존 요소를 포함하는 새로운 요소를 추가해주는 메소드
| 메소드 | 설명 |
| .wrap() | 선택한 요소를 포함하는 새로운 요소를 추가함. |
| .wrapAll() | 선택한 모든 요소를 포함하는 새로운 요소를 추가함. |
| .wrapInner() | 선택한 요소에 포함되는 새로운 요소를 추가함. |
1. .wrap() 메소드
'선택한 요소'를 포함하는 새로운 요소를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Element Insert</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
div { margin: 10px; }
.content { border: 2px solid yellow; }
.wrapper { border: 2px solid green; }
</style>
<script>
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrap("<div class='wrapper'></div>");
});
});
</script>
</head>
<body>
<h1>.wrap() 메소드</h1>
<div class="content">첫 번째 컨텐츠에요!</div>
<div class="content">두 번째 컨텐츠에요!</div>
<button>div 요소 추가</button>
</body>
</html>▼result
2. .wrapAll() 메소드
'선택한 모든 요소' 를 포함하는 새로운 요소를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Element Insert</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
div { margin: 10px; }
.content { border: 2px solid yellow; }
.wrapper { border: 2px solid green; }
</style>
<script>
$(function() {
$("button").on("click", function() {
// class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrapAll("<div class='wrapper'></div>");
});
});
</script>
</head>
<body>
<h1>.wrapAll() 메소드</h1>
<div class="content">첫 번째 컨텐츠에요!</div>
<div class="content">두 번째 컨텐츠에요!</div>
<button>div 요소 추가</button>
</body>
</html>▼result
3. .wraplnner() 메소드
'선택한 요소에 포함되는' 새로운 요소를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Element Insert</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
div { margin: 10px; }
.content { border: 2px solid skyblue; }
.wrapper { border: 2px solid gray; }
</style>
<script>
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소에 포함되는 새로운 요소를 추가함.
$(".content").wrapInner("<div class='wrapper'></div>");
});
});
</script>
</head>
<body>
<h1>.wrapInner() 메소드</h1>
<div class="content">첫 번째 컨텐츠에요!</div>
<div class="content">두 번째 컨텐츠에요!</div>
<button>div 요소 추가</button>
</body>
</html>▼result
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [제이쿼리] jQuery와 Ajax (0) | 2023.01.25 |
|---|---|
| [제이쿼리] jQuery 요소의 외부에 추가(.before(), .after(), .insertBefore(), insertAfter()) (0) | 2023.01.25 |
| [제이쿼리] jQuery 요소의 내부에 추가 (append, prepend, appendTo, prependTo) (0) | 2023.01.24 |
| [제이쿼리] jQuery 메소드 체이닝, getter / setter, width() / height(), .attr() 메소드 (2) | 2023.01.24 |
| [제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자) (0) | 2023.01.24 |