jQuery API append 메서드

2018-03-16

append, jQuery

매개변수로 지정된 내용을 각 요소의 끝에 삽입한다. 매개변수로 넘어간 요소에 마지막 자식 요소를 새로 추가한다.

append() 메서드는 지정한 요소를 jQuery 집합(collection)의 각 요소별로 마지막 자식 요소를 추가해주는 함수이다. 만약 첫번째 자식으로 삽입하려면 prepend()메서드를 사용하면 된다.

.append () 및 .appendTo () 메서드는 동일한 작업을 수행합니다. 주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다.

after() 와 insertAfter() 의 차이와 똑같다. 추가하려는 대상을 앞에 넣느냐 뒤에 넣느냐의 차이이다.

아래와 같은 HTML을 봐보자

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

append 메서드 실행

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

결과

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

여기서 appendTo() 메서드였으면

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

이렇게 써줘도 위의 결과랑 똑같이 나온다. 번역기로 돌린 뜻이 저거이다. 대상의 배치의 차이. 앞에 넣느냐 뒤에 넣느냐의 차이이다.

다수의 인자들(Additional Arguments)

컨텐츠를 추가하는 함수로는 .prepend(), .before(), .append() 등이 있으며 인자를 여러개 가질 수 있는 것도 비슷합니다. 인자로 올 수 있는 것들은 DOM 요소들, jQuery 객체들, HTML 문자열들, 그리고 DOM 요소들의 배열들이 있습니다.

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

$('body').append($newdiv1, [newdiv2, existingdiv1]);

3가지 방법으로 <div> 를 만들어서 .append() 함수에 다수의 인자로 넘길 수 있습니다. $('body').append($newdiv1, newdiv2, existingdiv1)과 같은 방법으로 말이죠.

예제

모든 p 태그에 HTML로 마지막 자식요소를 추가

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append 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" ).append( "<strong>Hello</strong>" );
</script>

</body>
</html>

모든 p 태그에 요소를 마지막 자식요소를 추가

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append 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" ).append( document.createTextNode( "Hello" ) );
</script>

</body>
</html>

모든 p 태그에 jQuery 객체 (DOM 요소 배열도 마찬가지) 마지막 자식요소를 추가

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

<strong>Hello world!!!</strong>
<p>I would like to say: </p>

<script>
$( "p" ).append( $( "strong" ) );
</script>

</body>
</html>

아마그래머

정리jQuery

jQuery API append 메서드

예제