[jQuery] 요소의 추가

복습

https://shins99.tistory.com/82

[jQuery] 선택 요소에 접근

 

---

요소의 추가

- 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메서드를 제공

---

기존 요소의 내부에 추가

다음 메소드를 사용시 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있음

 

1. .append()

2. .prepend()

3. .appendTo()

4. .prependTo()

---

.append() 메서드

- .append() 메서드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가

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

 

---

.prepend() 메서드

- .prepend() 메서드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가

 

예제
$(function() {
    $("button").on("click", function() {
       $("li").prepend("새로 추가된 콘텐츠에요!");
    });
});

---

.appendTo() 메서드

- .appendTo() 메서드는 선택한 요소를 '해당 요소의 마지막'에 삽입

(그 동작은 .append() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)

 

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

---

.prependTo() 메서드

- .prependTo() 메서드는 선택한 요소를 '해당 요소의 처음'에 삽입)

(그 동작은 .prepend() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)

 

예제
$(function() {
    $("button").on("click", function() {
        $("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
    });
});

---

 

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

 

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

---

기존 요소의 외부에 추가

다음 메소드를 사용시 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠 추가 가능

 

1. .before()

2. .after()

3. .insertBefore()

4. .insertAfter()

---

.before() 메서드

- .before() 메서드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가

 </p

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

---

.after() 메서드

- .after() 메서드는 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가

 

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

---

.insertBefore() 메서드

- .insertBefore() 메서드는 선택한 요소를 '해당 요소의 앞에' 삽입

(그 동작은 before() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)

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

 

---

.insertAfter() 메서드

- .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() 메서드

- .wrap() 메서드는 '선택한 요소'를 포함하는 새로운 요소를 추가

 

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

---

.wrapAll() 메서드

.wrapAll() 메서드는 '선택한 모든 요소'를 포함하는 새로운 요소를 추가합니다.

 

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

---

.wrapInner() 메서드

- .wrapInner() 메서드는 '선택한 요소에 포함되는' 새로운 요소를 추가

 

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

---

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

 

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