| 02.InsertAlter.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>DOM 요소의 앞/뒤에 요소 추가</title>
<style type="text/css">
.Chapter{ background-color:Silver;
}
.Content{ height:100px;
border:1px solid red;
}
</style>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //[1] 내용 뒤에 구분선(<hr/>) 삽입 $('<hr
/>').insertAfter(".Content"); //[2] TOP 링크를 Chapter 앞에 추가 $('p.Chapter:gt(0)').before("<a href='#'>TOP</a>"); //Top클릭시 맨 위로 이동 :.Chapter:gt(0)'인덱스 설정 하여 맨 첫번째 제외
});
</script>
</head> <body>
<p class="Chapter">1장</p>
<div class="Content"> 내용...
</div>
<p class="Chapter">2장</p>
<div class="Content"> 내용...
</div>
<p class="Chapter">3장</p>
<div class="Content"> 내용...
</div> </body> </html> |
| 결과확인 |
[그림38-1] |
02.InsertAlter.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 40.jQuery - Wrap ( 05.Maripulation - 04.Wrap ) (0) | 2009.11.11 |
|---|---|
| 39.jQuery - Append ( 05.Maripulation - 03.Append ) (0) | 2009.11.11 |
| 37.jQuery - Append ( 05.Maripulation - 01.Append ) (0) | 2009.11.11 |
| -- 현재 까지의 jQuery 소스4 -- (0) | 2009.11.11 |
| 36.jQuery - End ( 04.Traversing - 04.End ) (0) | 2009.11.11 |
Comments