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() 의 경우, 어디에 넣을지 먼저 선택한 뒤에("#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>
728x90
반응형
'Frontend > JQuery' 카테고리의 다른 글
[jQuery] 부모/자식 요소 선택자 (0) | 2023.12.29 |
---|---|
[jQuery] 요소의 복제 - clone() 메서드 (0) | 2023.12.28 |
[jQuery] remove(), empty() 메서드 (0) | 2023.09.22 |
[jQuery] prop() 메서드 vs attr() 메서드 (0) | 2023.09.21 |
[jQuery] html(), text() 메서드 (0) | 2023.09.20 |