- append(), prepend()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
// append - 덧붙이다.
// 동적 추가 시 많이 사용
// 뒤에 덧붙임
// prepend
// 앞에 덧붙임
// append로 만들기 좋은 예제
// to do list
$(document).ready(
function() {
$("#btn1").click(
function() {
$("p").append("<b> append text</b>"); // <p> 하위의 "뒷부분"에, 지정한 문구를 추가함
}
);
var list = 0;
$("#btn2").click(
function() {
list++;
$("ol").prepend("<li>" + "new item " + list + "</li>"); // <ol> 하위의 "앞부분"에, 지정한 문구를 추가함
}
);
}
);
</script>
</head>
<body>
<p>this is paragraph</p>
<p>this is another paragraph</p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<button id="btn1">append text</button>
<button id="btn2">prepend list item</button>
</body>
</html>
- before(), after()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("#btn1").click(
function() {
$("img").before("<b>before</b>"); // <img> 앞에 지정한 문구를 추가함
}
);
$("#btn2").click(
function() {
$("img").after("<b>after</b>"); // <img> 뒤에 지정한 문구를 추가함
}
);
}
);
</script>
</head>
<body>
<img src="./images/my_img.jpg" alt="jQuery" width="200" height="40">
<br><br>
<button id="btn1">insert before</button>
<button id="btn2">insert after</button>
</body>
</html>
- remove()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("button").click(
function() {
$("p").remove(".test, .demo"); // .test, .demo를 가진 <p>를 삭제함
}
);
}
);
</script>
<style>
#div1 {
width: 300px;
height: 150px;
border: 1px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<p>this is paragraph</p>
<p>this is another paragraph</p>
<p class="test">test</p>
<p class="demo">demo</p>
</div>
<button>remove div element</button>
</body>
</html>
- addClass()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("button").click(
function() {
$("h1, h2, p").addClass("blue"); // <h1>, <h2>, <p>에 .blue를 추가함
$("div").addClass("important"); // <div>에 .important를 추가함
}
);
}
);
</script>
<style>
.blue {
color: blue;
}
.important {
font-weight: bold;
font-size: 3em;
}
</style>
</head>
<body>
<h1>this is h1 tag (blue)</h1>
<h2>this is h2 tag (blue)</h2>
<p>this is p tag (blue)</p>
<div>this is div (important)</div>
<br>
<button>add class</button>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] navigator() (0) | 2020.08.12 |
|---|---|
| [제이쿼리] next(), first(), last(), eq() (0) | 2020.08.12 |
| [제이쿼리] attr() 사용하여 href 값 변경하기 (0) | 2020.08.12 |
| [제이쿼리] Button을 사용한 text(), html(), val() Set (0) | 2020.08.12 |
| [제이쿼리] animation(), val(), attr() (0) | 2020.08.12 |
