정리jQuery

jQuery API appendTo 메서드

appendTo, jQuery

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

append() 메서드와 동일한 기능을 한다. 다만 차이점은 추가될 컨텐츠와 타겟의 위치가 두 함수의 가장 큰 차이점이다.

HTML

1
2
3
4
5
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

스크립트 - appendTo() 메서드는 추가될 컨텐츠가 앞에 오고 타겟의 위치가 뒤에온다.

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

append() 메서드는 추가될 컨텐츠가 뒤에 오고 타겟의 위치가 앞에

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

결과는 다 같다.

1
2
3
4
5
6
7
8
9
10
11
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

또한 아래와 같은 방식으로도 추가할 수 있다.

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

그랬을 때 결과가 아래와 같이 나온다.

1
2
3
4
5
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

만약 추가할 컨텐츠 요소가 복수개라면, 처음 작업은 이동되고 그 다음에 추가될 때는 그 첫번째 작업에 대한 내용을 복사하여 추가하게 된다.

jsfiddle로 확인해보면 된다.

예제

id가 foo인 요소에 모든 span 요소들을 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>appendTo demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span>I have nothing more to say... </span>

<div id="foo">FOO! </div>

<script>
$( "span" ).appendTo( "#foo" );
</script>

</body>
</html>
Share