1. clone(), insertBefore(), prependTo(), appendTo(), insertAfter()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
#menu{background-color:blue;color:white}
#submenu{background-color:sliver;}
#content{height:100px;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//상단 메뉴를 복사(clone)해서 하단 메뉴에 추가(append)
$('#menu').clone().insertBefore('#submenu');
$('#menu').clone().prependTo('#submenu');
//<원래 하단 메뉴가 위치>
$('#menu').clone().appendTo('#submenu');
$('#menu').clone().insertAfter('#submenu');
});
</script>
</head>
<body>
<div id="menu">
홈 소개
</div>
<div id="content">
상단메뉴를 하단메뉴에 복사
</div>
<div id="submenu">
하단메뉴
</div>
</body>
</html>
2.replaceWith()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
button{display:block;margin:3px;color:red;width:200px}
div{color:red;border:2px solid blue;width:200px;margin:3px;text-align:center;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//모든 버튼 요소를 클릭시
$("button").click(function(){
//나자신(버튼)dmf <div>태그로 변경하자
$(this).replaceWith("<div>"+$(this).text() + "</div>");
});
});
</script>
</head>
<body>
<button>First</button>
<button>Second</button>
<button>Third</button>
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) - API(동적으로 다른 이벤트 호출) 와 live, delegate함수 비교 (0) | 2013.04.23 |
|---|---|
| 제이쿼리(jQuery) - CSS관련 API (0) | 2013.04.23 |
| 제이쿼리(jQuery) - DOM요소의 앞/뒤에 요소 추가 (0) | 2013.04.23 |
| 제이쿼리(jQuery) Manipulation API (0) | 2013.04.23 |
| 제이쿼리(jQuery) Traversing (0) | 2013.04.23 |
