jQuery DOM clone 메소드

.clone()은 엘리먼트를 복사하는 메소드이다.

클론은 이벤트 또한 복제하는데 하나하나 살펴보자

아메바......

위의 엘리먼트를 복제해보자

$('p').clone();

자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다.

$('p').clone().insertAfter('p');

위와같이하면아래와같이 복사되어 나올것이다

아메바......

이벤트까지 복제

이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다.

위의 버튼을 누르면 복제되도록하려면

  $('button').click(function() {
     //button 엘리먼트에 접근 클릭시 이벤트발생
      $(this).clone(true).insertAfter(this);
     //this 즉 button엘리먼트를 복사해서 그뒤에 붙임
     // clone(true)로 이벤트까지 복사
    });

이러면 클릭시 옆에 새로 버튼이 나올거고 또 그버튼을 클릭하면 또 복사되어 나올것이다.

예제릐 결과를 보고싶다면 아레로 가보자

http://sianasiatiger.cafe24.com/study/D_clone.html

저작자표시