[jQuery] prepend, prependTo 사용과 차이

괜히 귀찮게 밖에서 학원 다니지 않고 집에서도 공부 하자!

jquery에서 많이 쓰이는 prepend와 prependTo 이것은 서로 어떻게 다른지 사용법과 차이를 알아보겠습니다.

 

HTML

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn1">Prepend</button>
<button id="btn2">PrependTo</button>

 

SCRIPT

<script>
$(document).ready(function(){    // 문서가 준비되면,
  $("#btn1").click(function(){     // #btn1을 클릭하면
    $("p").prepend("<b>내가 들어갔지롱</b>"); //P태그 앞에 <p>내가 들어갔지롱</p>을 삽입.
  });
  $("#btn2").click(function(){   
    $("<b>내가 들어갔지롱</b>p").prependTo("P"); // <p>내가 들어갔지롱</p>을 P태그 앞에 삽입.
  });
});
</script>

 

실행

This is a paragraph.

This is another paragraph.

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

 

prepend는 $(A).prepend(B), A앞에 B가 추가됩니다. ( 맨앞으로 추가 )

prependTo는 $(B).prependTo(A), A가 B앞에 추가됩니다. ( 맨앞으로 추가 )

prepend와 prependTo는 그냥 각각 A앞에 B를, 그리고 B를 A앞에다가 라고 해석하면 되겠습니다.

 

prepend는 jqurey에서 많이 쓰이기 때문에 잘 알아두시는게 좋겠습니다. 다음 포스팅엔 여러가지 활용법에 대해서 알아보도록 합시다.  참 쉽죠잉?