.insertBefore()
원문 링크 
http://api.jquery.com/insertBefore/
개요 : 타겟 앞에 조건에 일치되는 요소를 삽입합니다.
- .insertBefore( target )
- target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체.
.before() 와 .insertBefore() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다. .before()는 이 함수 앞에 표현된 선택자이고 그 앞에 내용이 삽입됩니다. 반면 .insertBefore()은 함수 앞에 내용이 함수의 인자로 주어진 타겟 요소 앞에 삽입됩니다. (계속 반복되는 얘기네요.)
아래 HTML을 예로 보죠.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
몇가지 요소를 추가해 보도록 하겠습니다.
$('<p>Test</p>').insertBefore('.inner');각 <div> 요소들이 새로운 요소를 얻었습니다.
<div class="container"> <h2>Greetings</h2> <p>Test</p> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> </div>
화면에 있는 요소를 선택해서 다른 요소 앞에 오도록 할 수도 있습니다.
$('h2').insertBefore($('.container'));If an element selected this way is inserted elsewhere, it will be moved before the target (not cloned):
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
이때에는 타겟 요소 앞에 선택된 요소가 옮겨지게(move) 됩니다. 복사되어 선택요소가 그 자리에 남아 있게 되지는 않는다는 것입니다.
예 제
Inserts all paragraphs before an element with id of "foo". Same as $("#foo").before("p") id="foo" 를 p 태그뒤에 삽입합니다. 비슷하게 $("#foo").after("p") 입니다.
<!DOCTYPE html>
<html>
<head>
<style>#foo { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="foo">FOO!</div><p>I would like to say: </p>
<script>$("p").insertBefore("#foo"); // check before() examples</script>
</body>
</html>
미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| 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 |
| jQuery API 정복 - 뒤에 추가하기, insertAfter() (0) | 2011.11.22 |
| jQuery API 정복 - padding을 포함한 넓이 제어, innerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - padding 포함 높이 제어, innerHeight() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 높이 제어, height() (0) | 2011.11.22 |