jQuery API 살펴보기 after 메서드

2018-03-13

after, jQuery

어떤 요소 뒤에 새로운 요소를 추가한다.

.after () 및 .insertAfter () 메서드는 동일한 작업을 수행합니다. 주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다. .after ()를 사용하면 삽입 할 내용은 메서드의 인수 인 $ (target) .after (contentToBeInserted)에서 가져옵니다. 반면에 .insertAfter ()를 사용하면 내용 앞에 메서드가 삽입되고 대상 다음에 삽입되고 .insertAfter () 메서드의 인수로 전달됩니다. $ (contentToBeInserted) .insertAfter (target).

아래와 같은 HTML 코드를 봐보자.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery after 메서드 사용 : 한번에 여러 요소의 뒤에 내용이나 요소를 삽입할 수 있다.

1	$( ".inner" ).after( "<p>Test</p>" );

각 div 밑에 새로운 컨텐츠가 하나씩 생겼다.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

DOM 에 있는 특정 요소를 선택해서 다른 요소 뒤쪽에 위치 시킬수도 있다.

1	$( ".container" ).after( $( "h2" ) );

기존의 h2 태그 요소가 아래로 이동되었다. 만약 하나 이상의 요소가 있으면 첫번째는 이동되어 처리되고 그 다음 부터는 복사되어 처리된다.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

추가 인자들(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 lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>I would like to say: </p>

<script>
$( "p" ).after( "<b>Hello</b>" );
</script>

</body>
</html>

p 태그 뒤에 텍스트 노드를 만들어 추가한다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>I would like to say: </p>

<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>

</body>
</html>

p 태그 뒤에 jQuery 객체를 사용하여 추가한다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Hello</b>
<p>I would like to say: </p>

<script>
$( "p" ).after( $( "b" ) );
</script>

</body>
</html>

아마그래머

정리jQuery

jQuery API 살펴보기 after 메서드

추가 인자들(Additional Arguments)

예제