๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ  ์ž๋ฐ” ์„œ๋ฒ„ ํŽ˜์ด์ง€ JSP/๐Ÿช ์ œ์ด ์ฟผ๋ฆฌ jQuery

5๏ธโƒฃ ์ œ์ด ์ฟผ๋ฆฌ - List , Option + Oppend, Prepend ์ ์šฉ

by Meteora_ 2021. 3. 5.
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>

๋Œ“๊ธ€