.prepend()
원문 링크 
http://api.jquery.com/prepend/
개요 : 일치하는 요소 집합의 각 요소의 시작 부분에 매개 변수에 의해 지정된 내용을 삽입합니다.
- .prepend( content [, content] )
- content 일치하는 요소의 집합 각 요소의 시작 부분에 삽입할 DOM 요소, 요소의 배열, HTML 문자열, 또는 jQuery 객체.
- content 일치하는 요소의 집합 각 요소의 시작 부분에 삽입할 하나 이상의 추가적인 DOM 요소, 요소의 배열, HTML 문자열 또는 jQuery 객체.
- .prepend( function(index, html) )
- function(index, html) 조건에 일치하는 요소 집합의 각 요소의 시작 부분에 삽입할 HTML 문자열, DOM 요소 또는 jQuery 개체를 반환하는 함수. index 는 기존 HTML 요소값의 인덱스 위치를 말합니다. 함수 내에서 this는 현재 요소를 의미합니다.
.prepend() 함수는 jQuery 집합체(collection) 안에 있는 각 요소의 첫번째 자식 요소에 값을 삽입합니다. (마지막 자식 요소에 삽입하려면 .append()).
.prepend() 와 .prependTo() 함수의 기능은 동일합니다. 가장 큰 차이점은 문법의 차이입니다. .prepend()는, 함수 앞에 선택자 표현을 하고 선택된 요소에 함수의 인자인 내용이 삽입됩니다. 반면 .prependTo()는, 함수의 인자로 선택자가 전달되어 요소를 선택한 후 함수 앞의 내용이 삽입됩니다. (벌써 똑같은 말을 몇번 썼는지 ^^* )
매번 나오는 아래 HTML을 보시죠.
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
내용을 새로 만들어서 추가해 봅니다.
$('.inner').prepend('<p>Test</p>');각 <div class="inner"> 요소가 새로운 내용을 얻었습니다.
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>문서 상의 특정한 요소를 선택해서 다른 요소 앞에 위치 시킬수도 있습니다.
$('.container').prepend($('h2'));만약 하나의 요소(a single element)만 선택되었다면 선택된 요소가 이동되어 집니다.(복사가 아닙니다.)
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>Important: 만일 하나 이상의 타겟 요소라면 선택된 요소 집합의 첫번째 요소에는 내용이 만들어 진후 삽입되고 그 후에는 내용이 복사되면서 삽입됩니다.
추가적인 인자( Additional Arguments )
컨텐츠를 추가하는 다른 방법인 .append() 와 .before(), .prepend() 추가할 인자를 여러개 전달할 수 있도록 되어 있습니다. DOM 요소들, jQuery 객체들, HTML 문자열들, DOM 요소들의 배열값들이 해당됩니다.
예를들어, 새로운 두개의 <div> 삽입하고 기존의 하나의 <div>를 body 에 추가하는 내용을 살펴보면 아래와 같이 할 수 있습니다.
var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').prepend($newdiv1, [newdiv2, existingdiv1]);
그냥 예를 위한 예인것 같습니다. 실제로 이리 복잡하게 사용할까요? :) 판단은 각자가 알아서~~ ㅎㅎ
.prepend()는 다수의 추가적인 인자를 받을 수 있기 때문에, 다음과 같이 스크립트를 작성해서 세개의 <div>를 추가하는 방법을 사용할 수도 있습니다. $('body').prepend($newdiv1, newdiv2, existingdiv1). 당신의 코드에 맞게 알아서 취사선택해서 사용하세요.(라고 본문에서도 얘기하네요)
예 제
모든 문단(p태그) 앞에 HTML을 추가해 보시죠.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>there, friend!</p>
<p>amigo!</p>
<script>$("p").prepend("<b>Hello </b>");</script>
</body>
</html>
미리보기
Hello 문자열을 추가하는 내용입니다.
예 제
모든 문단(p태그) 앞에 DOM 요소를 추가해 보시죠.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>is what I'd say</p>
<p>is what I said</p>
<script>$("p").prepend(document.createTextNode("Hello "));</script>
</body>
</html>
미리보기
HTML이 아닌 DOM 요소를 만들어서 추가하고 있는걸 볼 수 있습니다.
예 제
모든 문단(p태그) 앞에 jQuery 객체를 추가해 보시죠.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p> is what was said.</p><b>Hello</b>
<script>$("p").prepend( $("b") );</script>
</body>
</html>
미리보기
b 태그값을 선택해서 jQuery 객체로 만든 다음 추가하고 있습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 클래스 제거, removeClass() (1) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 제거, remove() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기2, prependTo() (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 |
| jQuery API 정복 - 좌표 찾기, offset() (0) | 2011.11.22 |