[JQuery] 사진 윗쪽 뒤쪽 글추가 및 div <p>테그 삭제하기.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<img alt="" src="b_pic01.jpg" width="150" height="120">
<br><br>
<button id="btn1">insert before</button>
<button id="btn2">insert after</button>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("img").before("<b>before</b><br>");
});
$("#btn2").click(function () {
$("img").after("<br><b>after</b>");
});
});
</script>
<br><br>
<div id="div1" style="height: 100px; width: 500px;
border: 1px solid black; background-color: yellow;">
여기가 div1 태그입니다
<p id="pid">보행 속도를 확인하는 것이다</p>
<p class="pcls">잘 걷기 위해서는 근육량이 충분해야 하고, 근력도 좋아야 한다.</p>
</div>
<br><br>
<button id="btn3">버튼</button>
<script type="text/javascript">
$(function () {
$("#btn3").click(function () {
// $("#div1").remove(); // 전체 삭제
// $("#div1").empty(); // div안 모든 요소를 비운다
// $(".pcls").remove();
$("p").remove("#pid, .pcls");
});
});
</script>
</body>
</html>