<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>img {
width: 200px;
height: 200px;
}
.c1 {
border: 3px solid chartreuse;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<img src="https://i.pinimg.com/736x/d1/d1/44/d1d144b365c3a570af83005eb172b6bb.jpg" id="img1">
</div>
<button id="btn1">div내부 앞에 추가</button>
<button id="btn2">div내부 뒤에 추가</button>
<button id="btn3">div외부 앞에 추가</button>
<button id="btn4">img 1개 삭제</button>
<button id="btn5">div 안 비우기</button>
<button id="btn6">class 추가</button>
<button id="btn7">class 삭제</button>
<button id="btn8">부모요소 접근</button>
<script>
$('#btn1').click(function(){
// prepend : 해당 요소 내부 앞쪽에 추가
$('div').prepend('<h1>prepend</h1>')
})
$('#btn2').click(function(){
// append : 해당 요소 내부 뒤쪽에 추가
$('div').append('<h1>append</h1>')
})
$('#btn3').click(function(){
// before : 해당 요소 외부 앞쪽에 추가
$('div').before('<button id="newBtn">div 외부 뒤쪽 추가하기</button>')
})
// .click vs .on("click")
// 동적 이벤트 바인딩
// .click : 최초에 페이지를 로딩할때 선언되어있던 요소에 이벤트
// .on : 동적으로 추가 된 태그에 이벤트
$(document).on('click','#newBtn',function(){
// after : 해당 요소 외부 뒤쪽 추가
$('div').after('<h1>after</h1>')
})
$('#btn4').click(function(){
// remove : 요소 삭제
$('#img1').remove();
})
$('#btn5').click(function(){
// empty : 요소 전체 비우기
$('div').empty()
})
$('#btn6').click(function(){
$('img').addClass('c1')
})
$('#btn7').click(function(){
$('img').removeClass();
})
$('#btn8').click(function(){
// 부모 요소에 접근 : parent()
$('div>img').parent().css('background-color','pink')
})
</script>
</body>
</html>
