5️⃣ 제이 쿼리 - List , Option + Oppend, Prepend 적용

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

👨‍💻 코딩 도서관

5️⃣ 제이 쿼리 - List , Option + Oppend, Prepend 적용

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

댓글

티스토리툴바

5️⃣ 제이 쿼리 - List , Option + Oppend, Prepend 적용

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바