제이쿼리 .appendTo( target )

제이쿼리 .appendTo( target )

.append()및 .appendTo()방법은 동일한 작업을 수행합니다. 주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다. With .append()메소드의 앞에있는 selector 표현식은 내용이 삽입되는 컨테이너입니다. 로 .appendTo(), 한편, 콘텐츠가 선택 식 또는 즉시로 작성된 마크 업하거나, 상기 방법을 선행하고,이 타겟 컨테이너에 삽입된다.

다음 HTML을 고려하십시오.

h2>Greetings</h2>

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

우리는 내용을 만들고 한 번에 여러 요소에 삽입 할 수 있습니다.

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

각 내부 <div>요소는이 새로운 내용을 얻습니다.

<h2>Greetings</h2>

<div class="container">

  <div class="inner">

    Hello

    <p>Test</p>

  </div>

  <div class="inner">

    Goodbye

    <p>Test</p>

  </div>

</div>

페이지의 요소를 선택하여 다른 요소에 삽입 할 수도 있습니다.

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

이 방법으로 선택한 요소가 DOM의 다른 위치의 단일 위치에 삽입되면 대상으로 복제되고 복제되지 않고 삽입 된 요소로 구성된 새 집합이 반환됩니다.

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

  <h2>Greetings</h2>

</div>

그러나 하나 이상의 대상 요소가있는 경우 마지막 요소를 제외한 각 대상에 대해 삽입 된 요소의 복제본이 만들어지고 새 집합 (원본 요소와 복제본)이 반환됩니다.