<!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="photo4.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 name() {
$("img").before("<b>before</b><br>");
});
$("#btn2").click(function name() {
$("img").before("<br><b>after</b>");
});
});
</script>
<br>
<div id="div1" style="height: 100px; width:500px; border:1px sold black; background-color: yellow;">
여기가 div1 태그입니다.
<p id = "pig"> 보행속도</p>
<p class="pcls"> 잘걷는다.</p>
</div>
<button id="btn3">버튼</button>
<script type="text/javascript">
$(function () {
$("#btn3").click(function () {
$("#div1").remove(); //div 전체삭제
$("div1").empty(); //div안 모든 요소를비운다.
$("pcls").remove; //div안 pcls text 내용을 지운다.
$("p").remove("#pid, .pcls");// p 테크 전부를 지운다.
ㄴ
});
});
</script>
</body>
</html>
'JQuery > JQuery 기본' 카테고리의 다른 글
| [JQuery] length 길이 확인하기. (0) | 2018.08.07 |
|---|---|
| [JQuery] Window size 줄이면 메세지 띄우기 (0) | 2018.08.07 |
| [JQuery] append preppend (0) | 2018.08.06 |
| [JQuery] attr,prop (0) | 2018.08.06 |
| [JQuery] 키코드 (0) | 2018.08.06 |