Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Java
- 카카오
- 문자열
- 고잉버스
- 리눅스마스터 1급 정리
- 코딩테스트
- Kotlin
- Linux
- 스프링 빈
- 백준 java
- 반복문
- 백준 javascript
- 프로그래머스
- 명령어
- 코테
- 스프링 컨테이너
- Memoir
- 자바스크립트 코딩의 기술
- 리눅스마스터 3과목
- toCharArray
- 월간코드챌린지
- map
- 리눅스마스터1급
- 리눅스
- 자바
- 연습문제
- JavaScript
- 개발자 회고록
- GoingBus
- java 백준 1차원 배열
Archives
- Today
- Total
hoon's bLog
jQuery element 요소 복사 및 삭제 본문
반응형
요소의 복사
선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성 가능
. clone() : 선택한 요소를 복사하여 새로운 요소를 생성
$(function() {
$("button").on("click", function() {
// id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함.
$("#firstItem").clone().appendTo("#list");
});
});
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소 추가
$("#firstItem").appendTo("#list");
});
});
- 위의 예제에서 볼 수 있듯이. clone() 메서드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐
- 따라서 반드시 .append() 메서드나 .appendTo() 메서드와 같은 다른 메서드를 이용하여 요소를 추가해야 함
- .clone() 메서드를 사용하지 않고 .appendTo() 메서드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 것이 차이점
- .appendTo() : 선택한 요소를 '해당 요소의 마지막'에 삽입해 주는 메서드
- .clone() : 선택한 요소를 복사하여 새로운 요소를 생성함.
요소의 대체
선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체 가능
.replaceAll() : 선택한 요소를 지정된 요소로 대체, 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달 가능
$(function() {
$("button").on("click", function() {
// class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
$("#firstItem").replaceAll(".item");
});
});
.replaceWith() : 선택한 요소를 지정된 요소로 대체
- 이 메서드는 인수로 HTML 코드 형식 문자열이나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받음.
- 또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있습니다.
- .replaceAll() 메서드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대
- 또한, .replaceWith() 메서드는 지정된 요소로 대체되어 제거된 기존 요소를 반환
- .replaceAll() 와 .replaceWith() 는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거
$(function() {
$("button").on("click", function() {
// class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
$(".item").replaceWith($("#firstItem"));
});
});
.remove() : 선택한 요소를 DOM 트리에서 삭제, 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제
$(function() {
$("button").on("click", function() {
// class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
$(".content").remove(".first, .second");
});
});
// .detach() : 선택한 요소를 DOM 트리에서 삭제
// 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지
// .detach() 메서드가 반환하는 제이쿼리 객체를 .append()나 .prepend()와 같은 메서드에 인수로 전달하면 삭제한 요소를 다시 복구 가능
$(function() {
let data;
$("#detachBtn").on("click", function() {
data = $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
});
$("#restoreBtn").on("click", function() {
$("#container").append(data); // detach() 메서드로 삭제되었던 모든 요소를 다시 추가함.
});
});
// .empty() 메서드는 선택한 요소의 자식 요소를 모두 삭제
// 이때 .remove()나 .detach() 메서드와는 달리 선택된 요소 그 자체는 삭제
$(function() {
$("button").on("click", function() {
$("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
});
});
// .unwrap() : 선택한 요소의 부모 요소를 삭제
$(function() {
$("button").on("click", function() {
$("span").unwrap(); // 모든 <span>요소의 부모 요소를 삭제함.
});
});
Reference
https://www.tcpschool.com/jquery/jq_elementSelection_cssSelector
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
jQuery DOM method 기타 탐색 메서드, 필터링(filtering) 메서드 (0) | 2023.07.11 |
---|---|
jQuery parent sibling children element 부모 형제 자식 요소 탐색 (0) | 2023.07.10 |
jQuery 요소 Element 선택 및 선택자 Selector 사용 (0) | 2023.07.06 |
jQuery $ 문법 및 사용법 jQuery object (0) | 2023.07.05 |
jQuery 기초 문법 개념 (0) | 2023.07.04 |