페이지 로드완료후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할때 등
동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들 입니다.
before : 선택한 요소의 앞에 내용 삽입 ( 찾는 앞에 )
after : 선택한 요소의 뒤에 내용 삽입 ( 찾는 뒤에 )
prepend : 선택한요소의 자식요소 앞에 내용삽입 ( 데이터 맨 앞에)
append : 선택한요소의 자식요소 뒤에 내용삽입 (데이터 맨 뒤에)
예제코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<style>
div{border:1px solid #000000; margin:3px; width:200px;}
div p{font-weight:bold;}
div p.red{background-color:red;}
div p.blue{background-color:blue;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".t01 p").before("<p class='blue'>test</p>");
$(".t02 p").after("<p class='blue'>test</p>");
$(".t03").append("<p class='blue'>test</p>");
$(".t04").prepend("<p class='blue'>test</p>");
});
</script>
</head>
<body>
<div class="t01"><p class="red">test01</p></div>
<div class="t02"><p class="red">test02</p></div>
<div class="t03"><p class="red">test03</p></div>
<div class="t04"><p class="red">test04</p></div>
</body>
</html>
출처 : http://hompylove.com/system/bbs/board.php?bo_table=tip&wr_id=22
'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글
| jquery 팁 (0) | 2018.07.17 |
|---|---|
| 정규식표현 전/후방 탐색 (0) | 2018.07.16 |
| JSP 파라미터 url 삭제하기 (1) | 2018.07.16 |
| query 제이쿼리 자식 노드 다루기 (0) | 2018.07.16 |
| jquery after() 사용하기 (1) | 2018.07.16 |