JQuery

[jQuery] append

NamGH 2023. 9. 21. 16:47
append : 매개 변수인 콘텐츠를 jQuery 확장 객체 집합의 가장 마지막 자식으로 추가
               $("셀렉터").append("추가할 내용") append()의 인자로 기술한 내용을 $()으로 찾아 낸 엘리먼트에 추가

 

매개변수

엘리먼트에 삽입할 HTML 문자열이나 jQuery 객체, DOM 엘리먼트.

 

예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		float : left; /* inline형식처럼 바꾸기 */
		margin: 20px;
	}
</style>
<script src = "../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var fruits = ['apple', 'banana', 'orange', 'melon'];
		var cars = ['sonata', 'morning', 'genesis'];
		$(fruits).each(function(index, value){
			$('#fruit_list').append("<li>" + index +":" + value + "</li>");
		})
		
		$(cars).each(function(index, value){
			$('#car_list').append("<li>" + index + ":" + value + "</li>");
		})
		
		$.each(fruits, function(index, value){
			$('#fruit_list2').prepend("<li>" + index +":" + value + "</li>");
		})
		
		$.each(cars,function(index, value){
			$("<li>" + index + ":" + value + "</li>").prependTo('#car_list2');
		})
		
	})
</script>
</head>
<body>
	<div>
		<b>좋아하는 과일</b>
		<ul id = "fruit_list"></ul>
		
	</div>
	<div>
		<b>좋아하는 차</b>
		<ul id = "car_list"></ul>
	</div>
	<div>
		<b>좋아하는 과일2</b>
		<ul id = "fruit_list2"></ul>
	</div>
	<div>
		<b>좋아하는 차2</b>
		<ul id = "car_list2"></ul>
	</div>
</body>
</html>

 

결과