jQuery 3 - [요소 조작, 추가, 대체, 복사, 삭제]

목차

jQuery 요소의 조작

코딩의 시작, 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");
    });
});

 

---

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

 

메소드	설명
.append()	선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함.
.prepend()	선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함.
.appendTo()	선택한 요소를 해당 요소의 마지막에 삽입함.
.prependTo()	선택한 요소를 해당 요소의 처음에 삽입함.
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.

 

---

 

기존 요소의 외부에 추가

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");
    });
});

 

---

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

 

메소드	설명
.before()	선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함.
.after()	선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함.
.insertBefore()	선택한 요소를 해당 요소의 앞에 삽입함.
.insertAfter()	선택한 요소를 해당 요소의 뒤에 삽입함.

 

---

 

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

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>");
    });
});

 

---

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

 

메소드	설명
.wrap()	선택한 요소를 포함하는 새로운 요소를 추가함.
.wrapAll()	선택한 모든 요소를 포함하는 새로운 요소를 추가함.
.wrapInner()	선택한 요소에 포함되는 새로운 요소를 추가함.

 

---

 

요소의 복사 및 삭제

요소의 복사

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 요소를 그대로 추가한다.

 

---

요소를 복사해주는 메소드

 

메소드	설명
.clone()	선택한 요소를 복사하여 새로운 요소를 생성함.

 

---

 

요소의 대체

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"));
    });
});

 

---

요소를 대체해주는 메소드

 

메소드	설명
.replaceAll()	선택한 요소를 지정된 요소로 대체함.
.replaceWith()	선택한 모든 요소를 지정된 요소로 대체함.

 

---

 

요소의 삭제

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>요소의 부모 요소를 삭제함.
    });
});

 

---

요소를 삭제해주는 메소드

 

메소드	설명
.remove()	선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트도 같이 삭제됨)
.detach()	선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트는 유지됨)
.empty()	선택한 요소의 자식 요소를 모두 삭제함.
.unwrap()	선택한 요소의 부모 요소를 삭제함.