41.jQuery - Clone ( 05.Maripulation - 05.Clone )
검색된 요소를 복사하는 예제입니다.
| 05.Clone.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>검색된 요소를 복사하기</title>
<style type="text/css"> #menu{
background-color:Blue;
color:White;
} #submenu{
background-color:Silver;
} #content
{ height:100px; }
</style>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //[!] 상단 메뉴를 복사(Clone)해서 하단 메뉴에 추가(Append) $('#menu').clone().insertBefore('#submenu'); // 앞 $('#menu').clone().insertAfter('#submenu');// 뒤 $('#menu').clone().appendTo('#submenu'); //서브 매뉴에 포함해라 : 중간(앞 과 뒤) $('#menu').clone().prependTo('#submenu'); //맨 앞에 둔다. /* //서브 메뉴를 기준으로 보면 아래와 같음
$('#menu').clone().insertBefore('#submenu');
$('#menu').clone().prependTo('#submenu'); //원래 하단 메뉴가 있는 위치
$('#menu').clone().appendTo('#submenu');
$('#menu').clone().insertAfter('#submenu'); */
});
</script> </head> <body>
<div id="menu"> Home About
</div>
<div id="content"> 상단 메뉴를 아래 하단메뉴에 복사
</div>
<div id="submenu"> 여기는 하단 메뉴 들어오는곳
</div> </body> </html> <!-- 상단에 있는 메뉴를 하단메뉴에 그대로 복사하는 예제 : 동적으로 서버에 갔다오지 않고 해당 페이지에서 버튼 클릭시 바로 실행된다. 클라이언트에서 --> |
| 결과화면 |
[그림41-1] |
05.Clone.htm