반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .clone() 사용법
clone() 함수는 jQuery에서 제공하는 함수 중 하나로, 요소를 복제하는 데 사용됩니다.
이 함수를 사용하면 선택한 요소를 복제하여 새로운 요소를 생성할 수 있으며
복제된 요소는 원본 요소의 모든 속성, 이벤트 핸들러 및 하위 요소를 포함합니다.
간단한 예제로 버튼을 클릭 시 clone() 함수가 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>clone() 함수 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 클릭 이벤트 핸들러
$('#cloneButton').click(function(){
// 원본 요소를 복제하여 새로운 요소 생성
var originalElement = $('#originalElement');
var clonedElement = originalElement.clone();
// 복제된 요소를 새로운 위치에 추가
$('#newLocation').append(clonedElement);
});
});
</script>
</head>
<body>
<div id="originalElement">
<p>이것은 원본 요소입니다.</p>
</div>
<div id="newLocation">
<p>여기는 새로운 위치입니다.</p>
</div>
<button id="cloneButton">원본 요소 복제하기</button>
</body>
</html>
clone() 함수를 사용하여 'originalElement'를 복제하고,
이를 'clonedElement'변수에 저장합니다.
그 후 append() 함수를 사용하여 복제된 요소를 새로운 위치에 추가합니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .parseJSON() - JSON 문자열을 JavaScript 객체로 변환 (1) | 2024.02.29 |
|---|---|
| [jQuery] .parent() - 부모 요소를 선택 (0) | 2024.02.27 |
| [jQuery] .length - 선택한 요소의 개수를 반환 (0) | 2023.03.07 |
| [jQuery] .scrollTop() - 스크롤바 위치 조작 메서드 (0) | 2023.03.07 |
| [jQuery] .ajax() - 비동기적으로 데이터 처리 메서드 (0) | 2023.02.25 |