<!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>
<!-- Element(요소) 태그, 데이터
추가
append --요소 끝 부분에 추가
prepend -- 요소 시작부분에 추가
after -- 요소 이후에
before -- 요소 전에
삭제
remove
empty
-->
<p>치차리토 하비에르 에르난데스 한국의 축구팬들에게는 상당히 낯익은 인물이다.</p>
<p>데이빗 에르난데스 저스틴들크리이스 커크 는 </p>
<br>
<ol>
<li>사과</li>
<li>배</li>
<li>바나나</li>
</ol>
<button id="btn1">추가1</button>
<button id="btn2">추가2</button>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
//$("p").append("<br><b>append 추가 문자열입니다.</b>"); //태그도 같이 적용됨
$("ol").append("<li>append 추가 문자열입니다.</li>");
});
$("#btn2").click(function () {
//$("p").prepend("<br><b>prepend 추가 문자열입니다.</b>");
$("ol").prepend("<li>append 추가 문자열입니다.</li>");
});
});
</script>
<img alt="" src="neture.jpg" width="150" height="120">
<br>
<br>
<button id="btn3">insert before</button>
<button id="btn4">insert after</button>
<script type="text/javascript">
$(document).ready(function() { //해당 태그 앞에 추가 뒤에 추가
$("#btn3").click(function() {
$("img").before("<b>before</b><br>");//태그도 같이 적용됨
});
$("#btn4").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>
<button id="btn3">버튼</button>
<script type="text/javascript">
$(function () {
$("#btn3").click(function () {
//$("#div1").remove(); // 삭제됨
//$("#div1").empty(); //div1 아이디를 가진 태그의 모든 요소를 비운다
//$(".pcls").remove(); //클래스가 들어간 태그가 삭제됨
$("p").remove("#pid , .pcls"); // 해당 되는 태그만 삭제됨
});
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| Jquery(정리) (0) | 2018.08.09 |
|---|---|
| Jquery(10) load,resize (0) | 2018.08.09 |
| Jquery(8) attr , prop, text,val (0) | 2018.08.08 |
| Jquery(7) 값 복사하기,radio,getter,setter,keyCode (0) | 2018.08.08 |
| Jquery(6) 2차원배열, td:eq(index) ,for문 (0) | 2018.08.08 |