"JQuery clone()"의 두 판 사이의 차이

 
(사용자 2명의 중간 판 13개는 보이지 않습니다)
2번째 줄: 2번째 줄:
==개요==
==개요==
;jQuery .clone()
;jQuery .clone()
* 깊은 복사를 하는 jQuery 메소드
* 이벤트, 데이터까지 복제됨
==예시 1==
<syntaxhighlight lang='html' run>
<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>


<source lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#apple").appendTo("#container");
</script>
</syntaxhighlight>


<div class="cat1">Cat 1</div>
==예시 2==
<div class="cat2">Cat 2</div>
<syntaxhighlight lang='html' run>
<hr>
<div id="container">
<div class="dog1">Dog 1</div>
  <div id="apple">Apple</div>
<div class="dog2">Dog 2</div>
  <div id="banana">Banana</div>
</div>


<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#apple").clone().appendTo("#container");
</script>
</syntaxhighlight>
<syntaxhighlight lang='html' run>
<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
$( ".cat1" ).appendTo( ".cat2" );
$("#container").append($("#apple").clone());
$( ".dog1" ).clone().appendTo( ".dog2" );
</script>
</script>
</source>
</syntaxhighlight>
<jsfiddle height='200'>7c9Lozhy</jsfiddle>


==같이 보기==
==같이 보기==
*[[jQuery .appendTo()]]
* [[자바스크립트 cloneNode & appendChild]]
*[[복제]]
*[[복제]]


==참고 자료==
==참고==
* http://api.jquery.com/clone/
* http://api.jquery.com/clone/


[[분류: jQuery]]
[[분류: jQuery]]

2022년 4월 11일 (월) 10:59 기준 최신판

  다른 뜻에 대해서는 Array clone 문서를 참조하십시오.

1 개요[ | ]

jQuery .clone()
  • 깊은 복사를 하는 jQuery 메소드
  • 이벤트, 데이터까지 복제됨

2 예시 1[ | ]

html
Copy
<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#apple").appendTo("#container");
</script>

3 예시 2[ | ]

html
Copy
<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#apple").clone().appendTo("#container");
</script>
html
Copy
<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#container").append($("#apple").clone());
</script>

4 같이 보기[ | ]

5 참고[ | ]