-
JQuery로 DOM 다루기 - 요소 포함프로그래밍/JQuery 2022. 10. 25. 20:15728x90
요소를 포함 할 수 있는 메소드를 알아보자.
종류 설명 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>"); // 각자 감싼다. }); });
wrap() 적용 결과 화면 2. wrapAll() 적용
$(function(){ $('button').on('click',function(){ $('.content').wrapAll("<div class='wrapper'><div>"); // 한번에 감싼다. }); });
wrapAll() 적용 결과 화면 3. wrapInner() 적용
$(function(){ $('button').on('click',function(){ $('.content').wrapInner("<div class='wrapper'><div>"); // 안쪽으로 감싼다. }); });
wrapInner() 적용 결과 화면 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
JQuery로 DOM 다루기 - 요소 대체 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 복제 (0) 2022.10.26 JQuery로 DOM 다루기 - 요소 추가 (0) 2022.10.23 메소드 체이닝(Method Chaining) (0) 2022.10.22 요소 접근 메소드 (0) 2022.10.19