요소의 추가
요소의 추가
제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공합니다.
기존 요소의 내부에 추가
다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있습니다.
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() 메소드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가합니다.
예제
$(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() |
선택한 요소에 포함되는 새로운 요소를 추가함. |
