.before()
원문 링크 
http://api.jquery.com/before/
개요 : 선택된 요소 앞(before)에 인자로 주어진 요소를 삽입합니다.
- .before( content, [content] )
- content 삽입될 요소(HTML string, DOM element, jQuery object)
- content 추가로 삽입될 하나 이상의 요소들 (DOM elements, arrays of elements, HTML strings, jQuery objects)
- .before( function )
- function 추가될 요소를 반환하는 함수. 함수는 HTML string, DOM element(s), jQuery object 등을 반환합니다.
.before() 함수와 .insertBefore() 함수는 같은 작업을 수행합니다. 두 함수 사이에 가장 큰 차이점은 사용법입니다. .before() 함수는 추가될 요소를 선택하는 구문이 앞쪽에 위치하고 함수 내부의 인자가 삽입되는 반면, .insertBefore() 함수는 추가될 인자가 함수 앞쪽에 위치하고 함수의 인자가 선택하는 구문이 된다는 점입니다. 복잡한 말 같지만 둘 중에 하나만 알고 있어도 되겠네요. 어차피 결과는 같으니까요.
아래 마크업을 보시죠.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
여러 요소 앞에 새로운 요소를 추가하고 싶으면 아래와 같이 스크립트를 추가하면 됩니다.
$('.inner').before('<p>Test</p>');결과를 보시면 아하 하실겁니다. 아래가 결과입니다.
<div class="container"> <h2>Greetings</h2> <p>Test</p> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> </div>
또한 특정한 요소를 선택한 요소 앞으로 이동시킬 수도 있습니다.
$('.container').before($('h2'));만약 위와같이 스크립트를 작성하면 아래와 같이 h2 태그가 이동하게 됩니다.(복사되는 것이 아닙니다.)
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
하지만 선택된 요소가 두개 이상이라면 첫번째 요소는 이동되고 나머지는 복사되어 추가되게 됩니다. (이 내용은 반복적으로 나오는데 아 그렇구나 정도만 알고 계심 될것 같네요. 번역만 어렵지 별로 중요한 내용은 아닙니다. 물론 실제 구현 부분에서는요.)
추가 인자들 ( Additional Arguments )
추가될 인자를 사용하는 방법은 .prepend(), .after(), .before() 함수들에 아래와 같은 방법으로 동일하게 적용할 수 있습니다. 인자는 DOM elements, jQuery objects, HTML strings, 그리고 DOM element 배열들을 포함합니다.
예를 들어, 두 개의 <div>를 새로 만들어 추가하려면 아래와 같이 하면 됩니다.
var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('p').first().before($newdiv1, [newdiv2, existingdiv1]);
추가할 수 있는 인자수는 제한이 없습니다. 또한, 위의 방법 말고 인자를 쭈욱 나열하는 방법도 있는데 위와 아래는 같은 결과를 보여줍니다.
$('p').first().before($newdiv1, newdiv2, existingdiv1)
예 제
모든 p 태그 앞에 특정 요소를 추가합니다.
<!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 said...</p>
<script>$("p").before("<b>Hello</b>");</script>
</body>
</html>미리보기
예 제
모든 p 태그 앞에 DOM element를 추가합니다.
<!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 said...</p>
<script>$("p").before( document.createTextNode("Hello") );</script>
</body>
</html>
미리보기
예 제
모든 p 태그 앞에 jQuery object (또는 DOM Elements 배열)를 추가합니다.
<!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 said...</p><b>Hello</b>
<script>$("p").before( $("b") );</script>
</body>
</html>
미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 텍스트 비우기, empty() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 요소 제거, detach() (2) | 2011.11.22 |
| jQuery API 정복 - 속성을 제어, css() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 복사하기, clone() (0) | 2011.11.22 |
| jQuery API 정복 - 새로운 요소 추가, appendTo() (4) | 2011.07.26 |
| jQuery API 정복 - 마지막 자식 요소 추가, append() (6) | 2011.07.20 |
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |