[jQuery] 리스트 요소 여러개 한번에 추가 하기 append() html() 차이

리스트 요소 여러개 추가 하는 방법은

일반적으로 2가지 방법이 있다.

 

1. append() 메서드 이용

<script>
$(document).ready(function() {
    $("#btnAdd").click(function() {
        for(var i=1;i<=10;i++){
            var list=`<li>${i}</li>`;

            $(".list").append(list);
        }
    })
});
</script>

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

 

2. html() 메서드 이용

<script>
$(document).ready(function() {
    $("#btnAdd").click(function() {
        var list ="";
        for(var i=1;i<=10;i++){
            list+=`<li>${i}</li>`;
        }
        $(".list").html(list);
    })
});
</script>

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

 

 

2개 모두 결과는 같지만 대량으로 처리 할 경우 html()메서드를 이용해서 하나의 변수에 정보를 묶어서 처리 하는게 훨씬 효율적이고 속도가 빠르다.