jquery 제이쿼리 after() 뒤에추가하기

Jquery 2018. 2. 21. 13:55

SMALL

.after()

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

.after( content, [content] )Returns : jQuery

개요 : 어떤 요소 뒤에 새로운 요소를 추가합니다.

.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 에 있는 내용임을 밝힙니다.

출처: http://findfun.tistory.com/234 [즐거움을 찾자 Find Fun!!]

LIST

'Jquery' 카테고리의 다른 글

팝업청 오픈시 위치설정 (0)	2018.08.20
select box disabled 하기 (선택안되게하기) (0)	2018.08.17
jquery 제이쿼리 자식 노드 다루기 (0)	2018.02.21
JSP 파라미터 url 삭제하기 (0)	2018.01.31
jquery(.before.after,.append,prepend) 사용기 (0)	2018.01.30

SeoHW

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28