.prependTo()
원문 링크 
http://api.jquery.com/prependTo/
개요 : 타겟의 시작 부분에 일치하는 요소 집합의 모든 요소를 삽입합니다.
- .prependTo( target )
- target 선택자, 요소, HTML 문자열, 또는 jQuery 객체.
.prepend() 와 .prependTo() 함수의 기능은 동일합니다. 가장 큰 차이점은 문법의 차이입니다. .prepend()는, 함수 앞에 선택자 표현을 하고 선택된 요소에 함수의 인자인 내용이 삽입됩니다. 반면 .prependTo()는, 함수의 인자로 선택자가 전달되어 요소를 선택한 후 함수 앞의 내용이 삽입됩니다.
매번 나오는 아래 HTML을 보시죠.(에혀~ 몇번째인지)
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
내용을 새로 만들어서 추가해 봅니다.
$('<p>Test</p>').prependTo('.inner');각 <div> 내부에 새로운 내용이 추가되었습니다.
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>문서 상의 특정한 요소를 선택해서 다른 요소 위치로 이동 시킬수도 있습니다.
$('h2').prependTo($('.container'));만약 이런 스크립트를 사용했다면 선택된 요소가 이동되어 집니다.(복사가 아닙니다.)
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
만일 하나 이상의 타겟 요소라면 선택된 요소 집합의 첫번째 요소에는 내용이 만들어 진후 삽입되고 그 후에는 내용이 복사되면서 삽입됩니다.
예 제
ID="foo" 앞에 모든 span을 위치시킵니다.
<!DOCTYPE html>
<html>
<head>
<style>div { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="foo">FOO!</div>
<span>I have something to say... </span>
<script>$("span").prependTo("#foo"); // check prepend() examples</script>
</body>
</html>
미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 클래스 제거, removeClass() (1) | 2011.11.22 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 제거, remove() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() (0) | 2011.11.22 |
| jQuery API 정복 - 상대 좌표 구하기, position() (0) | 2011.11.22 |
| jQuery API 정복 - border 포함 넓이 구하기, outerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - border포함 높이 구하기, outerHeight() (0) | 2011.11.22 |