본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 뒤에 추가하기, insertAfter()

by zoo10 2011. 11. 22.

.insertAfter()

원문 링크 http://api.jquery.com/insertAfter/

.insertAfter( target )Returns : jQuery

개요 : 조건에 일치되는 요소 뒤에 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 에 있는 내용임을 밝힙니다.