jQuery - 요소 추가·제거, 숨기기·나타나기 효과

요소 추가

 

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

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

 

 

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

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

 

 

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

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

 

 

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

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

 

 

 

요소 제거

 

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

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

 

 

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

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

 

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

클래스가 box이고 클래스가 select 인 요소를 제거(자식 요소도 함께 제거된다) 

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

 

 

 

숨기기·나타나기 효과

 

1.show() - hide() -toggle()

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

 

 

 

2.fadeIn() - fadeOut() - fadeToggle()

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

 

참고) fadeTo(시간,투명도) : 0~1사이으 투명도값으로 사라지게 한다. (시간이 없으면 작동하지 않는다.)

$("button").click(function(){
	$(".box").fadeTo(1000,0.5);
});

 

 

 

3.slideDown - slideUp() -slideToggle()

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

 

 

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.