신규 노드를 특정 요소의 마지막 자식 노드로 추가 append() appendTo()

 

append(), appendTo()

prepend(), prependTo() 메서드와 반대로 마지막 요소로 추가 할 경우에는 append(), appendTo()메서드를 사용한다.

$부모요소.append($신규요소)
$신규요소.appendTo($부모요소)

 

append()

<script>
$(document).ready(function() {
    var count=0;
    $("#btnAdd").click(function() {
        count++;
        var $list =$(`<li>${count}</li>`);
        $(".list").append($list);
    })
});
</script>

<button id="btnAdd">
    리스트 추가
</button>
<ul class="list">
</ul>

 

 

appendTo()

<script>
$(document).ready(function() {
    var count=0;
    $("#btnAdd").click(function() {
        count++;
        var $list =$(`<li>${count}</li>`);
        $($list).appendTo(".list");
    })
});
</script>

<button id="btnAdd">
    리스트 추가
</button>
<ul class="list">
</ul>

 

실행결과

 

새로 생성된 요소는 제일 아래 추가된다.

append()와 appendTo() 메서드는 추가노드 위치와 부모노드 위치만 변경 됐을 뿐 동일한 결과를 나타낸다.