[jQuery All in One] 일치하는 요소 복사하는 방법 (clone)

남양주개발자

·

2020. 2. 15. 12:30

728x90
반응형

jQuery version: 3.4.1

 

.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>
728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글