[jQuery]신규 노드 생성 첫 번째 자식 요소로 추가 .prepend() .prependTo

 

먼저 신규노드를 생성 해보자

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

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

이렇게 하면 콘솔창에 신규 li요소가 생성된걸 확인할 수 있다.

 

콘솔창에 확인할때 get()을 사용 했는데 get()과 ep()의차이는 아래 포스팅 참고

https://moo-you.tistory.com/786

[jQuery] eq() 와 get()의 차이

 

이제 생성된 li 노드를 첫 번째 자식 노드로 추가 해보자

$부모요소.prepend($추가요소)
$추가요소.prependTo($부모요소)

 

첫 번째 자식 노드를 사용하기 위해서는

prepend()와 prependTo() 메서드를 사용한다.

 

prepend()

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

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

 

prependTo()

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

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

 

 

 

실행결과

새로 생성된 요소는 제일 위에 추가된다.

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