.after()
원문 링크 
http://api.jquery.com/after/
개요 : 어떤 요소 뒤에 새로운 요소를 추가합니다.
- .after( content, [content] )
- content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체
- content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들
- after( function(index) )
- function(index) 추가될 HTML 문자열을 반환하는 함수
HTML 을 보시죠.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
아래와 같은 스크립트를 적용해 볼까요.
$('.inner').after('<p>Test</p>');
아래와 같은 결과가 됩니다. 각 inner 클래스를 가진 <div> 요소들 뒤에 새로운 내용(content)이 추가됩니다.
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
DOM 에 있는 특정 요소를 선택해서 다른 요소 뒤쪽에 위치 시킬수도 있습니다. 아래 예제를 보시죠.
$('.container').after($('h2'));
만일 이런 방법으로 사용한다면 선택된 해당 요소는 복사가 되는 것이 아닌 이동처리가 됩니다. 아래 결과를 보시면 명확하실 겁니다.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> <h2>Greetings</h2>
만일 하나 이상의 타겟 요소가 있다면 첫번째는 이동 처리되고 그 다음 작업부터는 복사가 되어 처리 된답니다.
연결이 끊긴 DOM 노드를 삽입(Inserting Disconnected DOM nodes)
jQuery 1.4 버젼에 와서 .before() 와 .after() 함수로 연결이 끊긴 DOM 노드 작업을 할 수 있게 되었습니다. 저도 뭔 말인지 모르겠습니다. 다음 예제를 보시죠.
$('<div/>').after('<p></p>');
이 스크립트의 결과로 jQuery 집합은 div 와 paragraph 요소를 가지게 됩니다. 이 집합에 추가적인 조작을 하여 문서에 적용시킬 수 있습니다. 아래처럼 말이죠.
$('<div/>').after('<p></p>').addClass('foo')
.filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body'); 결과는 닫힘 </body> 태그 바로 직전에 스크립트의 결과가 삽입됩니다. 아래와 같은 HTML 태그가 결과입니다.
<div class="foo"></div> <p class="foo" id="bar">hello</p>
뭔가 번역을 하긴 했는데 이 내용과 위 내용의 소제목이 뭔 상관이 있는지 잘 모르겠는데요. ㅡㅡ;;;
함수 사용하기 (Passing a Function)
jQuery 1.4 버젼에 와서 .after() 함수는 인자로 삽입될 요소를 반환하는 함수를 사용할 수 있게 되었습니다.
$('p').after(function() {
return '<div>' + this.className + '</div>';
}); 위 예제의 결과는 p태그 후에 <div> 를 추가하는데 p태그의 클래스명(className)을 고대로 가져다가 사용할 수 있는 내용입니다. 뭐 예제가 중요한게 아니라 이것처럼 함수도 인자로 집어넣을 수 있다는 얘기입니다. 함수 내용에 신경 너무 쓰지들 마셔요.
추가 인자들(Additional Arguments)
여러개의 인자를 넘겨받아 새로운 요소를 추가하는 함수들은 .prepend(), .before(), .after() 와 같이 비슷한 함수들이 있습니다. 인자로는 DOM elements, jQuery objects, HTML 문자열들, 그리고 DOM elements로 구성된 배열 등이 올 수 있습니다.
예를 들어, 새로운 2개의 <div>와 이미 존재하는 <div>를 첫번째 p요소 다음에 추가하는 내용입니다.
var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);
.after() 함수는 여러개의 인자를 가질 수 있기 때문에, 세가지 방법을 통해 <div> 를 만들어서 붙여넣을 수 있습니다. $('p').first().after($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>I would like to say: </p>
<script>$("p").after("<b>Hello</b>");</script>
</body>
</html>미리보기
em 태그의 title 속성의 값을 찾아서 div 에 표시한 것을 볼 수 있습니다.
예 제
p 태그 뒤에 텍스트 노드를 만들어 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>$("p").after( document.createTextNode("Hello") );</script>
</body>
</html>
미리보기
img 태그에 src, title, alt 속성을 부여하고 있습니다. 재미있네요. map을 사용해서 추가하고 있는 예제입니다.
예 제
p 태그 뒤에 jQuery 객체를 사용하여 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>I would like to say: </p>
<script>$("p").after( $("b") );</script>
</body>
</html>미리보기
아주 간단하지만 정말 유용한 함수네요. 잘 사용하세요. 진짜 사용할 곳이 많을 것 같습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 요소 복사하기, clone() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 앞에 추가하기, before() (1) | 2011.11.22 |
| jQuery API 정복 - 새로운 요소 추가, appendTo() (4) | 2011.07.26 |
| jQuery API 정복 - 마지막 자식 요소 추가, append() (6) | 2011.07.20 |
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |
| jQuery API 정복 - 형제 요소들 찾기, siblings (0) | 2011.07.06 |
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |
| jQuery API 정복 - 이전 요소 찾기, prev() (0) | 2011.07.05 |