-
JQuery로 DOM 다루기 - 요소 복제프로그래밍/JQuery 2022. 10. 26. 21:58728x90
요소를 복제할 수 있는 메소드로 clone()에 대해 알아보자.
clone() 메소드는 선택한 요소를 복사하여 새로운 요소를 생성한다. 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> </head> <body> <ul id="list"> <li id="firstItem">첫번째 아이템</li> <li>두번째 아이템</li> <li>세번째 아이템</li> </ul> <button>아이템 복사</button> </body> </html>
기본 결과 화면 스크립트 추가
버튼 이벤트를 주어 firstItem 요소를 복제하여 list에 추가하는 스크립트를 추가한다.
<script> $(function(){ $('button').on('click', function(){ $('#list').append($('#firstItem').clone()); }); }); </script>
clone() 활용 예제 결과 위 스크립트는 아래와 같이 appendTo를 활용하여 대체할 수 있다.
<script> $(function(){ $('button').on('click', function(){ $('#firstItem').clone().appendTo('#list'); // 이렇게도 표현 가능 }); }); </script>728x90'프로그래밍 > JQuery' 카테고리의 다른 글
JQuery로 DOM 다루기 - 요소 삭제 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 대체 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 포함 (0) 2022.10.25 JQuery로 DOM 다루기 - 요소 추가 (0) 2022.10.23 메소드 체이닝(Method Chaining) (0) 2022.10.22