[jQuery] 요소의 추가, 복사, 삭제, 대체 (append,wrap,clone,remove...)

기존 요소의 내부에 추가

• .append() : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
• .prepend() : 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
• .appendTo() : 선택된 요소를 해당 요소의 마지막에 추가한다.
• .prependTo() : 선택된 요소를 해당 요소의 첫번째에 추가한다.

$(function() {
	// 마지막에 새로운 요소 추가
	$(".box1 ul").append("<li>C/C++</li>");
	$("<li>HTML 5</li>").appendTo(".box2 ul");
	
	// 첫번째에 새로운 요소 추가
	$(".box3 ul").prepend("<li>JSP/Servlet</li>");
	$("<li>ORACLE</li>").prependTo(".box4 ul");
});

 

기존 요소의 외부에 추가

• .before() : 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
• .after() : 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.
• .insertBefore() : 선택한 요소를 해당 요소의 앞쪽에 추가한다.
• .insertAfter() : 선택한 요소를 해당 요소의 뒤쪽에 추가한다.

$(function() {
	let a = 0, b = 0;
	$(".btn1").click(function() {
		$("p.p2").before("<p>앞" + (++a) + "번쨰 문장 추가</p>");
		// $("<p>앞"+(++a)+"번째 문장 추가</p>").insertBefore();
	});
	
	$(".btn2").click(function() {
		$("p.p2").after("<p>뒤" + (++b) + "번쨰 문장 추가</p>");
	});
});

 

기존 요소를 포함 하는  요소 추가

• .wrap() : 선택한 요소를 포함하는 새로운 요소를 추가한다.
• .wrapAll() : 선택한 모든 요소를 포함하는 새로운 요소를 추가한다.
• .wrapInner() : 선택한 요소 안을 감싸는 새로운 요소를 추가한다.

$(function() {
	$(".btn1").click(function() {
		$("p").wrap("<div class='box'></div>");
	});
	
	$(".btn2").click(function() {
		$("ul").wrapAll("<div class='box'></div>");
	});
	
	$(".btn3").click(function() {
		$("p").wrapInner("<label></label>");
	});
	
});

 

 요소 복사

• .clone() : 선택한 요소를 복사하여 새로운 요소를 생성한다.
• .clone(true) : 선택한 요소를 이벤트를 포함하여 복사하여 새로운 요소를 생성한다.

$(function() {
	$("ul li").click(function() {
		alert($(this).text());
	});
	
	$(".btn").click(function() {
		// $(".box1 ul").clone().appendTo(".box2"); // 이벤트는 복제 안됨
		$(".box2").append($(".box1 ul").clone());
		
		$(".box3 ul").clone(true).appendTo(".box4"); // true: 이벤트도 복제 
	});
});

 

 요소 삭제

• .remove() : 선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다
• .empty() : 선택한 요소의 자식 요소를 모두 삭제한다(해당 요소는 삭제하지 않는다).
• .detach() : 선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다.
• .unwrap() : 선택한 요소의 부모 요소를 삭제한다.

$(function() {
	$(".btn1").click(function() {
		$(".box1").remove(); 
	});
	// remove와 empty의 차이 알기
	$(".btn2").click(function() {
		$(".box2").empty();
	});
	
	$(".btn3").click(function() {
		$(".box3 ul").unwrap();
	});
	
	let element = null;
	$(".btn4").click(function() {
		if(element) return false;
		
		element = $(".box4").detach(); // 잘라내기
	});
	
	$(".btn5").click(function() {
		if( ! element) return false;
		
		$(".box3").before(element);
		element = null;
	});
	
	
});

 

 요소 대체

• .replaceAll() : 선택한 요소를 지정된 요소로 대체한다.
• .replaceWith() : 선택한 모든 요소를 지정된 요소로 대체한다.

$(function() {
	$(".btn1").click(function() {
		$("<div>웹 프로그래밍</div>").replaceAll(".box1 p");
	});
	
	$(".btn2").click(function() {
		$("#p2").replaceAll($("#p1")); // #p1이 #p2 로 대체. #p1은 없어지고 #p2만 남음.
	});
	
	$(".btn3").click(function() {
		$(".box3 p").replaceWith("<div>웹 프로그래밍</div>");
	});
	
	$(".btn4").click(function() {
		$("#p3").replaceWith($("#p4")); // #p3이 #p4로 대체. #p3은 없어지고 #p4만 남음
	});
	
});