.clone([withDataAndEvents])
설명 : 일치하는 요소를 깊은 복사(deep copy) 합니다.
.clone([withDataAndEvents])
withDataAndEvents (default: false)
Type: Boolean
이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다.
.clone([withDataAndEvents][, deepWithDataAndEvents])
withDataAndEvents (default: false)
Type: Boolean
이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다.
deepWithDataAndEvents (default: value of withDataAndEvents)
Type: Boolean
복제 된 요소의 모든 하위에 대한 이벤트 핸들러 및 데이터를 복사해야하는지 여부를 나타내는 Boolean 값입니다.
clone() 메서드는 일치하는 요소 집합의 전체 복사를 수행합니다.
일치하는 요소와 모든 하위 요소 및 텍스트 노드를 복사합니다.
참고사항 : 성능상의 이유로 특정 양식 요소 (예 : 텍스트 영역에 입력 된 사용자 데이터 및 선택에 대한 사용자 선택)의 동적 상태는 복제 된 요소에 복사되지 않습니다.
입력 요소를 복제 할 때 요소의 동적 상태 (예 : 텍스트 입력에 입력 된 사용자 데이터 및 확인란에 대한 사용자 선택)가 복제 된 요소에 유지됩니다.
삽입 방법 중 하나와 함께 사용하면 .clone ()은 페이지에서 요소를 복제하는 편리한 방법입니다. 다음 HTML을 고려하십시오.
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>.append()에 대한 설명에서 볼 수 있듯이 일반적으로 요소가 DOM의 어딘가에 삽입되면 이전 위치에서 이동합니다. 따라서 해당 코드를 실행하면
$(".hello").appendTo(".goodbye");DOM 구조의 결과는 다음과 같습니다.
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>이를 방지하고 대신 요소의 사본을 작성하려면 다음을 작성할 수 있습니다.
$(".hello").clone().appendTo(".goodbye");결과
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
참고
clone() 메서드를 사용하는 경우 복제 된 요소 또는 해당 내용을 문서에 다시 삽입하기 전에 수정할 수 있습니다.
일반적으로 원래 요소에 바인드 된 이벤트 핸들러는 복제본에 복사되지 않습니다. 선택적인 withDataAndEvents 매개 변수를 사용하면이 동작을 변경하고 대신 모든 이벤트 처리기의 복사본을 만들어 요소의 새 복사본에 바인딩 할 수 있습니다. jQuery 1.4부터 모든 요소 데이터 (.data () 메소드로 첨부)도 새 사본으로 복사됩니다. 그러나 요소 데이터 내의 개체와 배열은 복사되지 않으며 복제 된 요소와 원래 요소간에 계속 공유됩니다. 모든 데이터를 딥 복사하려면 각 데이터를 수동으로 복사하십시오.
// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
$clone = $elem.clone( true )
// Deep copy to prevent data sharing
.data( "arr", $.extend( [], $elem.data( "arr" ) ) );jQuery 1.5부터 deepWithDataAndEvents를 사용하여 withDataAndEvents를 선택적으로 향상시켜 복제 된 요소의 모든 하위에 대한 이벤트 및 데이터를 복사 할 수 있습니다.
참고 : .clone()을 사용하면 중복 된 id 속성을 가진 요소를 생성하는 부작용이 있습니다. 이는 고유해야합니다. 가능하면이 속성으로 요소를 복제하거나 클래스 속성을 식별자로 사용하지 않는 것이 좋습니다.
Example
모든 b 요소를 복제하고 복제본을 선택하여 모든 단락 앞에 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clone demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$( "b" ).clone().prependTo( "p" );
</script>
</body>
</html>'개발 > jQuery' 카테고리의 다른 글
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
