[jQuery] append, remove 태그 추가/삭제

append(), remove() 함수를 사용하여 태그를 추가/삭제 해보자

<script>
    function List()
    {
        var tmpHtml = "";
        tmpHtml = tmpHtml + "<li>테스트</li>";
 
        $("#div_List").append(tmpHtml);
    }
</script>
 
<div id="div_List"></div>

List() 함수가 수행되면, 다음과 같이 div_List 태그 <div></div> 사이에 <li>테스트</li>가 추가된다.

<div id="div_List"><li>테스트</li></div>

그렇다면, List() 함수가 여러번 수행될 경우는? 다음과 같은 코드가 작성될 것이다.

<div id="div_List"><li>테스트</li><li>테스트</li><li>테스트</li><li>테스트</li>...</div>

만일, div 태그 내부의 요소들을 삭제 후 새로 append 시켜주고 싶을 경우 remove() 함수를 사용하여 내부 요소 들을 삭제해주는 코드를 추가해준다.

<script>
    function List()
    {
       $("#div_List").remove(); // div자체를 삭제
       $("#div_List *").remove(); // 해결!
 
       var tmpHtml = "";
       tmpHtml = tmpHtml + "<li>테스트</li>";
 
       $("#div_List").append(tmpHtml);
    }
</script>
 
<div id="div_List"></div>

$("#div_List").remove(); 는 div 태그 전체를 모두 삭제해버린다.

div 태그 전체가 아닌 내부 요소만 삭제 하기 위해서는 $("#div_List *").remove(); 다음과 같이 작성해준다.