9) 요소의 추가
요소의 추가
제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공합니다.
기존 요소의 내부에 추가
다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있습니다.
- .append()
- .prepend()
- .appendTo()
- .prependTo()
.append() 메소드
.append() 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가합니다.
예제
<script>
$(function(){
$("button").on("click",function(){
$("#list").append("<li> 새로 추가된 아이템이에요!<li>");
});
});
</script>.prepend() 메소드
.prepend() 메소드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가합니다.
예제
<script>
$(function(){
$("button").on("click",function(){
$("li").prepend("새로 추가된 콘텐츠에요!");
});
});
</script>.appendTo() 메소드
.appendTo() 메소드는 선택한 요소를 '해당 요소의 마지막'에 삽입합니다.
그 동작은 .append() 메소드와 같지만, 소스(source)와 타켓(target)의 위치가 서로 반대입니다.
예제
<script>
$(function(){
$("#firstBtn").on("click",function(){
//id가 list인 요소의 맨 마지막에 id가 firstltem인 요소를 추가함
$("#firstItem").appendTo("#list");
});
});
</script>.prependTo()메소드
.prependTo() 메소드는 선택한 요소를 '해당 요소의 처음'에 삽입합니다.
그 동작은 .prepend() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
<script>
$(function(){
$("button").on("click",function(){
$("<b> 새로 추가된 콘텐츠에요!</b>").prependTo(".item");
});
});
</script>기존 요소의 내부에 새로운 요소를 콘텐트를 추가해주는 메소드
기존 요소의 외부에 추가
다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있습니다.
- .before()
- .after()
- .insertBefore()
- .insertAfter()
.before() 메소드
.before() 메소드는 선택한 요소의 '바로앞에 ' 새로운 요소나 콘텐츠를 추가합니다.
예제
<script>
$(function(){
$("button").on("click", function(){
//id 가 firstRow인 요소의 바로 앞에 새로운 <tr>요소를 추가함.
$("#firstRow").before("<tr><td>새로운 행이에요! </td></tr>");
});
});
</script>.after() 메소드
.after() 메소드는 선택한 요소의 '바로뒤에' 새로운 요소나 콘텐츠를 추가합니다.
예제
<script>
$(function(){
$("button").on("click",function(){
//id가 fristRow인 요소의 바로 뒤에 새로운 tr 요소를 추가함
$("#firstRow").after("<tr><td>새로운 행이에요</td></tr>")
});
});
</script>.insertBefore() 메소드
.insertBefore() 메소드는 선택한 요소를 해당 요소앞에 삽입합니다.
그 동작은 before()메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
<script>
$(function(){
$("button").on("click",function(){
$("<td>새로운셀이에요!</td>").insertBefore("#secondColumn");
});
});
</script>.insertAfter() 메소드
.insertAfter() 메소드는 선택한 요소를 '해당 요소의 뒤에' 삽입합니다.
그 동작은 .after()메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드
기존 요소를 포함하는 요소의 추가
다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있습니다.
- .wrap()
- .wrapAll()
- .wraplnner()
.wrap() 메소드
.wrap() 메소드는 '선택한 요소'를 포함하는 새로운 요소를 추가합니다.
예제
<script>
$(function(){
$("button").on("click",function(){
//class 가 content인 각 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrap("<div class='wrapper'></div>")
});
});
</script>.wrapAll() 메소드
.wrapAll() 메소드는 '선택한 모든 요소'를 포함하는 새로운 요소를 추가합니다.
예제
<script>
$(function(){
$("button").on("click",function(){
//class 가 'content'인 모든 요소를 포함하는 새로운 요소를 추가함
$
});
});
</script>.wrapInner() 메소드
.wrapInner() 메소드는 '선택한 요소에 포함되는' 새로운 요소를 추가함
예제
<script>
$(function(){
$("button").on("click",function(){
//class가 content인 각 요소에 포함되는 새로운 요소를 추가함.
$(".content").wraplnner("<div class='wrapper'></div>");
});
});
</script>
기존 요소를 포함하는 새로운 요소를 추가해주는 메소드
10) 요소의 복사 및 삭제
요소의 복사
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성할 수 있습니다.
- .clone()
.clone() 메소드
.clone() 메소드는 선택한 요소를 복사하여 새로운 요소를 생성합니다.
예제
<script>
$(function(){
$('button'),on("click", function(){
// id가 firstltem 인 요소를 복사하여 id가 list인 요소에 추가함
});
});
</script>다음 예제는 앞서 살펴본 .appendTo() 메소드 예제입니다.
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
});
});
</script>위의 예제에서 볼 수 있듯이 .clone() 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐입니다.
따라서 반드시 .append() 메소드나 .appendTo() 메소드와 같은 다른 메소드를 이용하여 요소를 추가해야 합니다.
.clone() 메소드를 사용하지 않고 .appendTo() 메소드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 점이 다릅니다.
요소를 복사해주는 메소드
요소의 대체
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있습니다.
- .replaceAll()
- .replaceWith()
.replaceAll() 메소드
.replaceAll() 메소드는 선택한 요소를 지정된 요소로 대체합니다.
이 메소드는 인수로 선택자나 제이쿼리 객체, HTML, DOM요소, 배열 등을 전달받을 수 있습니다.
<script>
$(function(){
$('button').on('click',function(){
//class 가 item 인 각 요소를 id가 firstitem인 요소로 대체함
$('#firstItem').replaceAll('.item');
});
});
</script>.replaceWith() 메소드
.replaceWith() 메소드는 선택한 요소를 지정된 요소로 대체합니다. 이 메소드는 인수로 HTML코드 형식의 문자열이나 제이쿼리객체, HTML DOM 요소, 배열 등을 전달받을 수 있습니다.
또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있습니다.
.replaceWith() 메소드의 동작은 .replaceAll() 메소드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
또한, replaceWith() 메소드는 지정된 요소로 대체되어 제거된 기존 요소를 반환합니다.
예제
<script>
$(function(){
$('button').on('click',function(){
// class가 item인 모든 요소를 id가 firstItem 인 요소로 대체함
$(".item").replaceWith($("#firstItem"));
});
});
</script>※ .replaceAll() 메소드와 .replaceWith() 메소드는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거합니다.
요소를 대체해주는 메소드
요소의 삭제
다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있습니다.
- .remove()
- .detach()
- .empty()
- .unwrap()
.remove()
.remove() 메소드는 선택한 요소를 DOM 트리에서 삭제합니다.
이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제됩니다.
예제
<script>
$(funtion(){
$("button"),on("click",funtion(){
$('.content').remove(".first, .second");
});
});
</script>
.detach() 메소드
.detach() 메소드는 선택한 요소를 DOM 트리에서 삭제합니다.
이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지됩니다.
.detach() 메소드가 반환하는 제이쿼리 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있습니다.
<script>
$(funtion(){
var data;
$('#detachBtn').on('click',funtion(){
data = $(.content).detach();
});
$("#restoreBtn").on('click',funtion(){
$("#container").append(data);
});
});
</script>.empty() 메소드
.empty() 메소드는 선택한 요소의 자식 요소를 모두 삭제합니다.
이때 .remove() 나, .detach() 메소드와는 달리 선택된 요소 그자체는 삭제되지 않습니다.
예제
<script>
$(funtion(){
$("button").on("click",funtion(){
$("#container").empty(); // id가 container인 요소의 자식 요소를 모두 삭제함
});
});
</script>.unwrap() 메소드
.unwrap() 메소드는 선택한 요소의 부모요소를 삭제합니다.
예제
<script>
$(funtion(){
$("button").on("click",funtion(){
$("span").unwrap();
});
});
</script>요소를 삭제해주는 메소드
