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>
결과
'JQuery' 카테고리의 다른 글
| [jQuery] Bind (0) | 2023.09.21 |
|---|---|
| [jQuery] 테이블 동적 생성 (0) | 2023.09.21 |
| [jQuery] siblings (0) | 2023.09.21 |
| [jQuery] children (0) | 2023.09.21 |
| filter (0) | 2023.09.21 |
