[jQuery] 요소의 추가
복습
https://shins99.tistory.com/82
[jQuery] 선택 요소에 접근
복습 https://shins99.tistory.com/81 [jQuery] 제이쿼리 선택자 복습 https://shins99.tistory.com/80 [jQuery] CSS 선택자 복습 https://shins99.tistory.com/79 [jQuery] 제이쿼리 문법 복습 https://shins99.tistory.com/78 [jQuery] 제이쿼
shins99.tistory.com
요소의 추가
- 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메서드를 제공
기존 요소의 내부에 추가
다음 메소드를 사용시 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있음
1. .append()
2. .prepend()
3. .appendTo()
4. .prependTo()
.append() 메서드
- .append() 메서드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가
|
1
2
3
4
5
6
|
예제
$(function() {
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템이에요!</li>");
});
});
|
cs |
.prepend() 메서드
- .prepend() 메서드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가
|
1
2
3
4
5
6
|
예제
$(function() {
$("button").on("click", function() {
$("li").prepend("새로 추가된 콘텐츠에요!");
});
});
|
cs |
.appendTo() 메서드
- .appendTo() 메서드는 선택한 요소를 '해당 요소의 마지막'에 삽입
(그 동작은 .append() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
});
});
|
cs |
.prependTo() 메서드
- .prependTo() 메서드는 선택한 요소를 '해당 요소의 처음'에 삽입)
(그 동작은 .prepend() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)
|
1
2
3
4
5
6
|
예제
$(function() {
$("button").on("click", function() {
$("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
});
});
|
cs |
기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메서드
| .append() | 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. |
| .prepend() | 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. |
| .appendTo() | 선택한 요소를 해당 요소의 마지막에 삽입함. |
| .prependTo() | 선택한 요소를 해당 요소의 처음에 삽입함. |
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
기존 요소의 외부에 추가
다음 메소드를 사용시 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠 추가 가능
1. .before()
2. .after()
3. .insertBefore()
4. .insertAfter()
.before() 메서드
- .before() 메서드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가
</p
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// id가 "firstRow"인 요소의 바로 앞에 새로운 <tr>요소를 추가함.
$("#firstRow").before("<tr><td>새로운 행이에요!</td></tr>");
});
});
|
cs |
.after() 메서드
- .after() 메서드는 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// id가 "firstRow"인 요소의 바로 뒤에 새로운 <tr>요소를 추가함.
$("#firstRow").after("<tr><td>새로운 행이에요!</td></tr>");
});
});
|
cs |
.insertBefore() 메서드
- .insertBefore() 메서드는 선택한 요소를 '해당 요소의 앞에' 삽입
(그 동작은 before() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소를 추가함.
$("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
});
});
|
cs |
.insertAfter() 메서드
- .insertAfter() 메서드는 선택한 요소를 '해당 요소의 뒤에' 삽입
(그 동작은 .after() 메서드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대)
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// id가 "secondColumn"인 요소의 바로 뒤에 새로운 <td>요소를 추가함.
$("<td>새로운 셀이에요!</td>").insertAfter("#secondColumn");
});
});
|
cs |
기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메서드
| .before() | 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. |
| .after() | 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. |
| .insertBefore() | 선택한 요소를 해당 요소의 앞에 삽입함. |
| .insertAfter() | 선택한 요소를 해당 요소의 뒤에 삽입함. |
기존 요소를 포함하는 요소의 추가
다음 메서드를 사용시 기존 요소를 포함하는 새로운 요소나 콘텐츠 추가 가능
1. .wrap()
2. .wrapAll()
3. .wrapInner()
.wrap() 메서드
- .wrap() 메서드는 '선택한 요소'를 포함하는 새로운 요소를 추가
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrap("<div class='wrapper'></div>");
});
});
|
cs |
.wrapAll() 메서드
.wrapAll() 메서드는 '선택한 모든 요소'를 포함하는 새로운 요소를 추가합니다.
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrapAll("<div class='wrapper'></div>");
});
});
|
cs |
.wrapInner() 메서드
- .wrapInner() 메서드는 '선택한 요소에 포함되는' 새로운 요소를 추가
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소에 포함되는 새로운 요소를 추가함.
$(".content").wrapInner("<div class='wrapper'></div>");
});
});
|
cs |
기존 요소를 포함하는 새로운 요소를 추가해주는 메서드
| .wrap() | 선택한 요소를 포함하는 새로운 요소를 추가함. |
| .wrapAll() | 선택한 모든 요소를 포함하는 새로운 요소를 추가함. |
| .wrapInner() | 선택한 요소에 포함되는 새로운 요소를 추가함. |