.appendTo() 사용해서 코드 위치 이동시키기 요소 위치변경및 추가

.appendTo(target)를 사용하면 코드를 원하는 위치에 추가할수 있고 배치 위치를 변경할수도 있다.

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

다음과 같은 코드가 있을때 <p>Test</p> 엘리먼트를 inner에 추가한다고 가정하면

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

이렇게 넣어줄수 있다.

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

그러면 이렇게 각 클래스 inner안에 추가된걸 확인할수있다.

페이지 안에 내용있는 구문의 위치를 변경시킬수도 있다.

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

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

 만약 Target 요소가 2개 이상일 경우에는 마지막 엘리먼트를 제외한 각 대상에는 복제된 엘리먼트가 들어간다.

https://api.jquery.com/appendTo/#appendTo-target

↑자세한 내용 참고

ex) item-detail 엘리먼트를 item_thmbs a엘리먼트 안으로 안동시킨다고 했을때

<div class="shop-item">
    <ul>
        <li>
            <div class="item-thmbs"><a href="#">item_thmbs</a></div>
            <div class="item-detail">item-detail1</div>
        </li>
        <li>
            <div class="item-thmbs"><a href="#">item_thmbs</a></div>
            <div class="item-detail">item-detail2</div>
        </li>
        <li>
            <div class="item-thmbs"><a href="#">item_thmbs</a></div>
            <div class="item-detail">item-detail3</div>
        </li>
        <li>
            <div class="item-thmbs"><a href="#">item_thmbs</a></div>
            <div class="item-detail">item-detail4</div>
        </li>
    </ul>
</div>

그냥 단순히 item-detail을 넣어준다고 표시하면 모든 item-detail의 내용이 복사되서 들어간다.

$( ".item-thumbs a" ).hover(function() {
      $(this).parent(".item-thumbs").next(".item-detail").appendTo( this );
  });

그래서 클릭하면 클릭한 해당 요소 a에 부모요소인 item-thumbs를 찾고 그것의 형제노드를 찾아서 여기에 넣어준다