닫기
이전 다음

NOTICE

새로움을 향한 설.레.임

jquery (before,after,append,prepend 메서드 사용),동적 html 데이터 삽입

페이지 정보

작성자 홈피사랑 작성일14-07-21 10:51 조회63,917회 댓글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>

 

 

예제링크

http://hompylove.com/2014/test/12.html

댓글목록

등록된 댓글이 없습니다.

홈피사랑 제공서비스

  • 홈피사랑 홈페이지제작 1.웹표준, 크로스브라우징 지원

    웹표준, 크로스브라우징 지원

    IE, 크롬, 사파리,파이어폭스 등 어떤 브라우저에서도 동일하게 홈페이지가 보여질 수 있도록 제작됩니다.

  • 홈피사랑 홈페이지제작 2.호스팅/도메인 1년 무상지원

    호스팅/도메인 1년 무상지원

    기본형 호스팅,도메인 1년 무상지원

  • 홈피사랑 홈페이지제작 3.원본파일제공

    원본파일제공

    추후 수정 및 유지관리가 용이하도록 제작완료 후 홈페이지 소스를 제공합니다.

  • 홈피사랑 홈페이지제작 4.검색등록 무료지원

    검색등록 무료지원

    네이버,다음 사이트 및 지역검색 등록 지원 및 노출 키워드제안(협의후)