jquery (before,after,append,prepend 메서드 사용),동적 html 데이터 삽입
페이지 정보
작성자 홈피사랑 작성일14-07-21 10:51 조회88,734회 댓글0건관련링크
본문
페이지 로드완료후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할때 등
동적으로 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>
예제링크
댓글목록
등록된 댓글이 없습니다.
