요소 생성 및 제거
* 삽입 관련 메소드
선택된 요소를 기준으로 새로운 요소를 추가시켜주는 메소드
$(A).append(B) : A 요소 내에 B 요소를 추가(자손/하위)
$(A).prepend(B) : A 요소 내에 앞부분에 B 요소를 추가(자손/하위)
$(A).after(B) : A 요소 뒷부분에 B 요소를 추가 (동위)
$(A).before(B) : A 요소 앞부분에 B 요소를 추가(동위)
$(A).append(B) : A 요소 내에 B 요소를 추가 (자손/하위)
$(A).prepend(B) : A 요소 내에 앞부분에 B 요소를 추가(자손/하위)
$(A).after(B) : A 요소 뒷부분에(요소 내 : X) B 요소를 추가(동위)
$(A).before(B) : A 요소 앞부분에(요소 내 : X) B 요소를 추가(동위)
<h1 id="test1">
<span>A</span>
</h1>
<h1 id="test2">
<span>A</span>
</h1>
<h1 id="test3">
<span>A</span>
</h1>
<h1 id="test4">
<span>A</span>
</h1>
<script>
$(function(){
$('#test1').append('<span class="addItem">Baaa</span>');
$('#test2').prepend('<span class="addItem">Baa</span>');
$('#test3').after('<span class="addItem">Baaa</span>');
$('#test4').before('<span class="addItem">Bccc</span>');
// $('<span class="addItem">B</span>').appendTo('')
// $(B).appendTo(A) : 선택된 요소(B)를 타겟요소 (A)에 추가
});
</script>
* 제거 관련 메소드
$(선택자).empty() :
선택된 요소의 하위 요소를 제거해주는 제거해주는 메소드
$(선택자).remove()|detach() : 선택된 요소를 제거한 후 해당 요소를 반환해주는 메소드
<li>.remove() : 제거된 요소의 이벤트를 가져오지 않음</li>
<li>.detach() : 제거된 요소의 이벤트까지 가져옴</li>
.remove() : 제거된 요소의 이벤트를 가져오지 않음
.detach() : 제거된 요소의 이벤트까지 가져옴
$(function(){
// #item1 요소에 마우스 오버 이벤트 추가
// - 마우스 오버되었을 때는 bg-pink 클래스 추가
// - 마우스가 요소에서 떨어졌을 때 bg-pink 클래스 제거
$('#item1').hover(function(){
// mouseenter 이벤트 발생되었을 때
$(this).addClass('bg-pink');
}, function(){
// mouseout 이벤트 발생되었을 때
$(this).removeClass('bg-pink');
});
$(function(){
$('#item1').hover(function(){
// - mouseeenter 이벤트 발생 되었을 때
$(this).addClass('bg-pink');
}, function(){
// - mouseout 이벤트가 발생되었을 떄
$(this).removeClass('bg-pink');
});
})
// [제거1] 버튼 클릭했을 때 #item1 요소를 비워보자.
$('#empty').click(function(){
$('#item1').empty();
});
<h1 class="area" id="item1">
<span>힘내!</span>
</h1>
$('#empty').click(function(){
$('#item1').empty();
});
선택된 요소의 하위요소를 제거해준다.
// [제거2] 버튼 클릭했을 때 해당 요소를 제거해보자 (remove)
$('#remove').click(function(){
const rmElement = $('#item1').remove();
// #result 인 요소에 제거된 항목을 추가
$('#result').append(rmElement);
});
remove() :
제거된 요소의 이벤트를 가져오지 않는다
.detach() : 제거된 요소의 이벤트까지 가져옴
$('#detach').click(function(){
const dtElement = $('#item1').detach();
$('#result').append(dtElement);
});