.insertAfter()
원문 링크 
http://api.jquery.com/insertAfter/
개요 : 조건에 일치되는 요소 뒤에 target에 해당되는 요소를 삽입합니다.
- .innerWidth( target )
- target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체.
.after() 와 .insertAfter() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다. A.after(B)라면 A 뒤에 B를 추가하는 것이고 A.insertAfter(B)는 B 뒤에 A를 추가하는 겁니다.
아래 HTML을 보시죠.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
아래 처럼 스크립트를 사용하여 여러 요소들에 한번에 삽입해보겠습니다.
$('<p>Test</p>').insertAfter('.inner');아래 처럼 각 <div> 요소들에 새로운 내용이 추가되었습니다. 아래처럼 말이죠.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
또한 페이지에서 어떤 요소를 선택해서 다른 요소 뒤에 추가할 수도 있습니다.
$('h2').insertAfter($('.container'));If an element selected this way is inserted elsewhere, it will be moved after the target (not cloned):
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> <h2>Greetings</h2>
이때에는 타겟 요소 뒤에 선택된 요소가 옮겨지게(move) 됩니다. 복사되어 선택요소가 그 자리에 남아 있게 되지는 않는다는 것입니다.
예 제
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>
<p> is what I said... </p><div id="foo">FOO!</div>
<script>$("p").insertAfter("#foo"); // check after() examples</script>
</body>
</html>
미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| 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 정복 - 앞에 추가하기, insertBefore() (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 |
| jQuery API 정복 - 텍스트 비우기, empty() (0) | 2011.11.22 |