728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>์ค๊ตญ์ฐ '๋๋ ๋์ถ' ๊ตญ๋ด์ ๊ฑด์กฐ ์ ํต.. ์ฐ๋ฆผ์ฒญ 'ํ๋ชฉ๋ถ๋ฅ' ์ถ์ง</p>
<p>์์ํ ๋นํธ์ฝ์ธ์ด 5์ตโ105์ต, ์ฒ๋ถ์ ์ด๋ป๊ฒ ํ๋</p>
<ol>
<li>์ฌ๊ณผ</li>
<li>๋ฐฐ</li>
<li>๋ฐ๋๋</li>
</ol>
<select id="food">
<option>ํ๋ฒ๊ฑฐ</option>
<option>ํผ์</option>
<option>์นํจ</option>
</select>
<button type="button" id="append">์ถ๊ฐ(๋ค)</button>
<button type="button" id="prepend">์ถ๊ฐ(์)</button>
<script type="text/javascript">
$(function() {
$("#append").click(function(){
//$("p").append("append ์ถ๊ฐ ์์์
๋๋ค");
//$("ol").append("<li>ํฌ๋</li>"); //๋ค์ ์ถ๊ฐ
$("#food").append("<option>์คํ
์ดํฌ</option>");
});
$("#prepend").click(function(){
//$("p").prepend("append ์ถ๊ฐ ์์์
๋๋ค");
//$("ol").prepend("<li>๋ธ๊ธฐ</li>"); //์์ ์ถ๊ฐ
$("#food").prepend("<option>ํ์คํ</option>");
});
});
</script>
</body>
</html>'๐ ์๋ฐ ์๋ฒ ํ์ด์ง JSP > ๐ช ์ ์ด ์ฟผ๋ฆฌ jQuery' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 7๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - ๋ฒํผ์ ๋๋ฅด๋ฉด ํ ์คํธ ์๋ ์ถ๊ฐ (0) | 2021.03.08 |
|---|---|
| ์ ์ด ์ฟผ๋ฆฌ - ์ด๊ธ ๋ฌธ์ /ํ์ด 1๏ธโฃ๐ (0) | 2021.03.08 |
| 4๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - ๋ฒํผ + 2์ฐจ์ ๋ฐฐ์ด ์ด์ฉํ ํ ์ด๋ธ ์๋ ์์ฑ (0) | 2021.03.05 |
| 3๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - CSS, MouseOver, ์์ฑ ์ถ๊ฐ (0) | 2021.03.05 |
| 2๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - Button ํ๊ทธ ์ ๊ทผ๊ณผ ์๋๋ฒ, + this (0) | 2021.03.05 |
๋๊ธ