(→개요) |
|||
5번째 줄: | 5번째 줄: | ||
* 이벤트, 데이터까지 복제됨 | * 이벤트, 데이터까지 복제됨 | ||
<source lang=' | ==예시 1== | ||
<source lang='html'> | |||
<div class="cat1">Cat 1</div> | <div class="cat1">Cat 1</div> | ||
<div class="cat2">Cat 2</div> | <div class="cat2">Cat 2</div> | ||
14번째 줄: | 13번째 줄: | ||
<div class="dog2">Dog 2</div> | <div class="dog2">Dog 2</div> | ||
<script src="//code.jquery.com/jquery.min.js"></script> | |||
<script> | <script> | ||
$( ".cat1" ).appendTo( ".cat2" ); | $( ".cat1" ).appendTo( ".cat2" ); | ||
20번째 줄: | 20번째 줄: | ||
</source> | </source> | ||
<jsfiddle height='200'>7c9Lozhy</jsfiddle> | <jsfiddle height='200'>7c9Lozhy</jsfiddle> | ||
==예시 2== | |||
<source lang='html'> | |||
<style> | |||
.box { min-height: 60px; } | |||
.box1 { background: red; } | |||
.box2 { background: orange; } | |||
</style> | |||
<div class='box box1'> | |||
<ul> | |||
<li>하나</li> | |||
<li>둘</li> | |||
</ul> | |||
</div> | |||
<div class='box box2'></div> | |||
<script src="//code.jquery.com/jquery.min.js"></script> | |||
<script> | |||
$(".box1>ul").clone().appendTo(".box2"); | |||
</script> | |||
</source> | |||
<jsfiddle height='300'>fe3re9a5</jsfiddle> | |||
==같이 보기== | ==같이 보기== |
2017년 1월 8일 (일) 16:09 판
- 다른 뜻에 대해서는 Array clone 문서를 참조하십시오.
1 개요
- jQuery .clone()
- 깊은 복사를 하는 jQuery 메소드
- 이벤트, 데이터까지 복제됨
2 예시 1
html
Copy
<div class="cat1">Cat 1</div>
<div class="cat2">Cat 2</div>
<hr>
<div class="dog1">Dog 1</div>
<div class="dog2">Dog 2</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$( ".cat1" ).appendTo( ".cat2" );
$( ".dog1" ).clone().appendTo( ".dog2" );
</script>
3 예시 2
html
Copy
<style>
.box { min-height: 60px; }
.box1 { background: red; }
.box2 { background: orange; }
</style>
<div class='box box1'>
<ul>
<li>하나</li>
<li>둘</li>
</ul>
</div>
<div class='box box2'></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(".box1>ul").clone().appendTo(".box2");
</script>
4 같이 보기
5 참고 자료
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.