프로그래밍/JQuery
JQuery로 DOM 다루기 - 요소 복제
하와이블루
2022. 10. 26. 21:58
728x90
요소를 복제할 수 있는 메소드로 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>
위 스크립트는 아래와 같이 appendTo를 활용하여 대체할 수 있다.
<script>
$(function(){
$('button').on('click', function(){
$('#firstItem').clone().appendTo('#list'); // 이렇게도 표현 가능
});
});
</script>
728x90