[jQuery] 요소의 이동 (append, prepend)

jQuery를 이용해서 웹페이지에 1) 새로운 요소를 추가하거나 2) 기존의 요소를 이동할 수 있습니다.

    1) 새로운 요소를 추가하는 것은 append()나 prepend() 메서드를 활용할 수 있습니다. 

    2) 기존의 요소를 이동하기 위해서는 appendTo()와 prependTo() 메서드를 활용할 수 있습니다. 

 

다음 코드와 실행 결과를 통해서 append() 와 appendTo() 메서드의 작동 방식을 알 수 있습니다.

<script>
  $(document).ready(function() {
    $("#line2").append('<button id="target7">#target7</button>');
    $("#target2").appendTo("#line2");
  });
</script>
<div>
  <h4>1st Line</h4>
  <div id="line1">
    <button id="target1">#target1</button>
    <button id="target2">#target2</button>
    <button id="target3">#target3</button>
  </div>
</div>
<div>
  <h4>2nd Line</h4>
  <div id="line2">
    <button id="target4">#target4</button>
    <button id="target5">#target5</button>
    <button id="target6">#target6</button>
  </div>
</div>

 

append, appendTo 메서드

append() 의 경우, 어디에 넣을지 먼저 선택한 뒤에("#line2") 전달 받은 내용('<button id="target7">#target7</button>')을 삽입합니다. 

appendTo()의 경우, 이동할 요소를 먼저 선택한 뒤에("#target2") 정해진 위치("#line2")에 요소를 이동합니다.

 

append() 와 appendTo()는 요소를 추가하거나 이동할 때 기존의 요소들의 뒤에 들어가는 반면, prepend()와 prependTo() 는 기존 요소들의 앞으로 들어가게 됩니다. 

 

<script>
  $(document).ready(function() {
    $("#line2").prepend('<button id="target7">#target7</button>');
    $("#target2").prependTo("#line2");
  });
</script>
<div>
  <h4>1st Line</h4>
  <div id="line1">
    <button id="target1">#target1</button>
    <button id="target2">#target2</button>
    <button id="target3">#target3</button>
  </div>
</div>
<div>
  <h4>2nd Line</h4>
  <div id="line2">
    <button id="target4">#target4</button>
    <button id="target5">#target5</button>
    <button id="target6">#target6</button>
  </div>
</div>

 

prepend, prependTo 메서드