[jQuery] 요소 추가, 제거 - hide(), remove(), show() 사용법

✔️ 요소 추가

prepend()
- 선택한 요소 안의 첫 부분에 내용 삽입

$(function() {
	$(".box").prepend("추가 문자");
});

 

append()
- 선택한 요소 안의 끝 부분에 내용 삽입

$(function() {
	$(".box").append("추가 문자");
});

 

before()
- 선택한 요소 앞에 내용 삽입

$(function() {
	$(".box").before("추가 문자");
});

 

after()
- 선택한 요소 뒤에 내용 삽입

$(function() {
	$(".box").after("추가 문자");
});

 

 

✔️ 요소 제거

remove()
- 선택한 요소를 제거 (자식 요소도 함께 제거된다.)

$(".box").remove();

 

❗remove()는 매개변수를 가질 수 있다.

$(".box").remove(".select");

• 클래스가 box이고, select인 클래스의 요소를 제거(자식 요소도 함께 제거됨)

 

empty()
- 선택한 요소의 자식 요소 제거 (선택한 요소는 제거되지 않는다.)

$(".box").empty();

 

 

✔️ 숨기기 / 나타나기 효과

show() - hide() - toggle()

$("button").click(function() {
	$(".box").toggle();
 });

• show() - 숨겨진 요소룰 화면에 표시한다.
• hide() - 화면의 요소를 화면에서 제거한다.
• toggle() - show()와 hide()를 반복한다.
• ⭐ show()와 hide()는 너비와 높이, 투명도를 변화하는 것

 

fadeIn() - fadeOut() - fadeToggle()

$("button").click(function() {
	$(".box").fadeToggle();
 });

• fadeIn() - 숨겨진 요소를 화면에 표시한다.
• fadeOut() - 화면의 요소를 화면에서 표시하지 않게 한다.
• fadeToggle() - fadeIn()과 fadeOut()을 반복한다.
• ⭐ fadeIn()과 fadeOut()은 투명도가 변화하는 것

 

❗fadeTo(시간, 투명도): 0 ~ 1 사이의 투명도 값으로 사라지게 한다.

 

slideDown() - slideUp() - slideToggle()

$("button").click(function() {
	$(".box").slideToggle();
 });

• slideDown() - 숨겨진 요소를 화면에 표시한다.
• slideUp() - 화면의 요소를 화면에서 표시하지 않게 한다.
• slideToggle() - slideDown()과 slideUp()을 반복한다.
• slideDown()과 slideUp()은 높이가 변화하는 것