[jQuery]특정 노드 이전에 요소생성 insertBefore() before()

insertBefore() before()

$추가요소.insertBefore($기준요소)
$기준요소.before($추가요소)

 

insertBefore()

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

<button id="btnAdd">
    리스트 추가
</button>
<ul class="list">
    <li>A</li>
    <li class="on">B</li>
    <li>C</li>
    <li>D</li>
</ul>

 

before()

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

<button id="btnAdd">
    리스트 추가
</button>
<ul class="list">
    <li>A</li>
    <li class="on">B</li>
    <li>C</li>
    <li>D</li>
</ul>

 

 

실행결과

 

버튼을 클릭하면 on클래스를 기준으로 위쪽으로 li가 들어가게 된다.

insertBefore()와 before()는 기준요소와 추가요소의 위치만 변경 되었을 뿐 같은 결과를 나타낸다.