요소의 추가

내부 추가/리턴

.append()

선택한 요소 내의 마지막에 추가

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

👉 아이디가 list인 요소 내의 마지막에 <li></li> 요소 추가

.prepend()

선택한 요소 내의 처음에 추가

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

👉 아이디가 list인 요소 내의 처음에 <li></li> 요소 추가

.appendTo()

선택한 요소를 마지막에 추가

💡 A.append(B)가 A 요소 내에 B 요소를 추가했다면
A.appendTo(B)는 B요소 내에 A 요소를 추가!

.prependTo()

선택한 요소를 처음에 추가

💡 A.prepend(B)가 A 요소 내에 B 요소를 추가했다면
A.prependTo(B)는 B요소 내에 A 요소를 추가!

.html()

해당 요소의 HTML 리턴

.text()

해당 요소의 text 리턴

---

외부 추가/리턴

.before()

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

.after()

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

.insertBefore()

선택한 요소를 해당 요소의 앞에 삽입함.

💡 A.before(B)가 A 요소의 바로 앞에 B요소를 추가했다면
A.insertBefore(B)는 B요소의 바로 앞에 A 요소를 추가!

.insertAfter()

선택한 요소를 해당 요소의 뒤에 삽입함.

💡 A.after(B)가 A 요소의 바로 뒤에 B요소를 추가했다면
A.insertAfter(B)는 B요소의 바로 뒤에 A 요소를 추가!

---

---

복사 및 삭제

복사

.clone()

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

대체

A.replaceAll(B)

지정한 요소B를 선택한 요소A로 대체

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

A.replaceWith(B)

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

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

삭제

.remove()

선택한 요소 삭제
💡 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제

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

.detach()

선택한 요소 삭제
💡 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않음
👉 다시 추가가 가능하다!

$(function() {
  
    var data;
    $("#detachBtn").on("click", function() {
        data = $(".content").detach();
      // data 변수에 class가 "content"인 요소를 담고,
      // class가 "content"인 요소를 모두 삭제함.
    });

    $("#restoreBtn").on("click", function() {
        $("#container").append(data);
      // data 변수에 들어있는 값을 다시 추가함
    });
  
});

.empty()

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

.unwrap()

선택한 요소의 부모 요소를 모두 삭제