[jQuery] append, appendTo 사용과 차이

학원 다니지 않고 집에서도 공부 할자! 전 포스팅에 prepend와 prependTo 사용, 차이를 썼는데요. 이번에는 비슷한 jquery에서 많이 쓰이는 append와 appendTo 이것은 서로 어떻게 다른지 사용법과 차이를 알아보도록 하겠습니다.

 

HTML

<p>손흥민</p>
<p>레알마드리드 선수</p>
<button id="btn1">append 실행</button>
<button id="btn2">appendTo 실행</button>

HTML은 위와 같이 작성해줍니다.

 

SCRIPT

<script>
$(document).ready(function(){    // 문서가 준비되면,
  $("#btn1").click(function(){     // #btn1을 클릭하면
    $("p").append("<b>발롱도르 수상자</b>"); //P태그 뒤에 <p>발롱도르 수상자</p>을 삽입.
  });
  $("#btn2").click(function(){   
    $("<b>발롱도르 수상자</b>").appendTo("p"); // <b>발롱도르수상자</b>를 P태그 뒤에 삽입.
  });
});
</script>

스크립트는 위와 같이 작성해줍니다.

실행

손흥민

레알마드리드 선수

(버튼을 클릭해보세요.)

 

append는 $(A).append(B), A뒤에 B가 추가됩니다. ( 맨뒤로 추가 )

appendTo는 $(B).prependTo(A), b를 a의 뒤에 추가됩니다. ( 맨뒤로 추가 )

 

prepend가 앞에 추가된다고 하면 append 는 뒤에 추가된다고 보면 되겠습니다.

즉 prepend와 append의 차이는 그냥 앞에 추가하느냐 뒤에 추가하느냐만 다르지 기능은 같습니다.