jQuery / Method / .appendTo()

.appendTo()

.appendTo()는 선택한 요소를 다른 요소 안에 넣습니다.

문법

.appendTo( target )

1	.appendTo( target )

예를 들어

$( 'p' ).appendTo( 'blockquote' );

1	$( 'p' ).appendTo( 'blockquote' );

는 p 요소를 blockquote 요소 안으로 이동시킵니다.

예제

abc를 클래스 값으로 가지는 span 요소를 h1 요소 안으로 이동시킵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'span.abc' ).appendTo( 'h1' );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem Ipsum Dolor</h1>
    <span class="abc">Consectetur adipiscing elit.</span>
    <p>Aenean nec mollis nulla.</p>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!doctype html>

<head>

<title>jQuery</title>

$( document ).ready( function() {

$( 'span.abc' ).appendTo( 'h1' );

} );

</script>

</head>

<body>

<h1>Lorem Ipsum Dolor</h1>

<span class="abc">Consectetur adipiscing elit.</span>

<p>Aenean nec mollis nulla.</p>

</body>

</html>

렌더링 결과는 다음과 같습니다.

<h1>Lorem Ipsum Dolor<span class="abc">Consectetur adipiscing elit.</span></h1>
<p>Aenean nec mollis nulla.</p>

1 2	<h1>Lorem Ipsum Dolor<span class="abc">Consectetur adipiscing elit.</span></h1> <p>Aenean nec mollis nulla.</p>

참고

jQuery / Method / .append()