JQuery HTML 추가 삭제 - jQuery HTML chuga sagje

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

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

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

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

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

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

코딩의 시작, TCP School

요소의 추가

제이쿼리는 새로운 요소나 콘텐츠를 쉽게 추가 가능하다.

기존 요소의 내부에 추가

1. .apeend()
2. .prepend()
3. appendTo()
4. prependTo()

.append()

선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        $("#list").append("<li> 새로 추가된 아이템</li>");
    });
});

.prepend()

선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        $("#list").prepend("<li> 새로 추가된 아이템</li>");
    });
});

.appendTo()

선택한 요소를 '해당 요소의 마지막'에 삽입'.
동작은 .append()와 같지만, 소스(source)와 타겟(target)위치가 서로 반대

$(function() {
    $("firstBtn").on("click", function() {
        // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가
        $("#fristItem").appendTo("#list");
    });
});

.prependTo()

선택한 요소를 '해당 요소의 처음'에 삽입'.
동작은 .prepend()와 같지만, 소스(source)와 타겟(target)위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        // class가 "item"인 요소의 처음에 앞의 <b>요소를 삽입
        $("<b>새로 추가된 콘텐츠</b>").prependTo(".item");
    });
});

기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메소드

기존 요소의 외부에 추가

1. .before()
2. .after()
3. insertBefore()
4. .insertAfter()

.before() 메소드

선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        // id가 "firstRow"인 요소의 바로 앞에 새로운 <tr> 요소를 추가
        $("#firstRow").before("<tr><td> 새로운 행 </td></tr>");
    });
});

.after() 메소드

선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        // id가 "firstRow"인 요소의 바로 뒤에 새로운 <tr> 요소를 추가
        $("#firstRow").after("<tr><td> 새로운 행 </td></tr>");
    });
});

.insertBefore() 메소드

선택한 요소를 '해당 요소의 앞에' 삽입
동작은 before() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        // id가 "secondColumn"인 요소의 바로 앞에 새로운 <td> 요소를 추가
        $("<td><새로운 셀/td>").insertBefore("#secondColumn");
    });
});

.insertAfter() 메소드

선택한 요소를 '해당 요소의 뒤에' 삽입
동작은 after() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        // id가 "secondColumn"인 요소의 바로 뒤에 새로운 <td> 요소를 추가
        $("<td><새로운 셀/td>").insertAfter("#secondColumn");
    });
});

기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드

기존 요소를 포함하는 요소의 추가

1. .wrap()
2. .wrapAll()
3. wrapInner()

.wrap()

'선택한 요소'를 포함하는 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 요소를 포함하는 새로운 요소를 추가
        // <div class='wrapper'><div class='content'></div></div>
        $(".content").wrap("<div class='wrapper'></div>");
    });
});

.wrapAll()

'선택한 모든 요소'를 포함하는 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가
        // <div class='wrapper'><div class='content'>1</div><div class='content'>2</div></div>
        $(".content").wrapAll("<div class='wrapper'></div>");
    });
});

.wrapInner()

'선택한 요소에 포함되는' 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 각 요소에 포함되는 새로운 요소를 추가
        //<div class='content'>1<div class='wrapper'></div></div>
        $(".content").wrapInner("<div class='wrapper'></div>");
    });
});

기존 요소를 포함하는 새로운 요소를 추가해주는 메소드

요소의 복사 및 삭제

요소의 복사

1. clone

clone()

선택한 요소를 복사하여 새로운 요소를 생성

$(function() {    
    $("button").on("click", function() {
        // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가
        $("firstItem").clone().appendTo("#list");
    });
});

1. 복사의 경우(clone)
2. 추가의 경우(appendTo)

.clone() 메소드는 기존의 HTML을 복사하여 새로운 HTML 요소를 생성한다.
.appendTo()만을 사용할 경우, 기존에 존재하는 HTML 요소를 그대로 추가한다.

요소를 복사해주는 메소드

요소의 대체

1. .replaceAll()
2. .replaceWith()

.replaceAll()

선택한 요소를 지정된 요소로 대체
이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.

$(function() {
    $("button").on("click", function() {
        // class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
        $("#firstItem").replaceAll(".item");
    });
});

.replaceWith()

선택한 요소를 지정된 요소로 대체

• 이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.
• 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있다.

reaplaceAll() 과 동작이 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대
replaceWith()은 지정된 요소로 대체되어 제거된 기존 요소를 반환

$(function() {
    $("button").on("click", function() {
        // class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
        $(".item").replaceWith($("#firstItem"));
    });
});

요소를 대체해주는 메소드

요소의 삭제

1. .remove()
2. .detach()
3. .empty()
4. .unwrap()

.remove()

선택한 요소를 DOM 트리에서 삭제

• 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제

$(function() {
    $("button").on("click",  function() {
        // class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
        $(".content").remove(".first, .second");
    });
});

.detach()

선택한 요소를 DOM 트리에서 삭제

• 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지
• .detach() 메소드가 반환하는 제이쿼리 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구 가능

$(function() {
    var  data;
    $("#detachBtn").on("click",  function() {
        data  =  $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
        });
    $("#restoreBtn").on("click",  function() {
        $("#container").append(data); // detach() 메소드로 삭제되었던 모든 요소를 다시 추가함.
    });
});

.empty()

선택한 요소의 자식 요소를 모두 삭제

• 이때 .remove()나 .detach() 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다.

$(function() {
    $("button").on("click",  function() {
        $("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
    });
});

.unwrap()

선택한 요소의 부모 요소를 삭제합니다.

$(function() {
    $("button").on("click",  function() {
        $("span").unwrap(); // 모든 <span>요소의 부모 요소를 삭제함.
    });
});

요소를 삭제해주는 메소드