[JQuery] Jquery(제이쿼리) prepend(), append()

자바 웹 개발자가 될거야/JSP

[JQuery] Jquery(제이쿼리) prepend(), append()

whitz 2021. 12. 28. 14:20

< prepend() >

- 해당 객체의 앞쪽에 추가할 수 있는 함수

- 해당 태그요소를 적용하여 사용가능

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('body').prepend("<h2> prepend() : 앞쪽에 추가 </h2>");
	});
</script>

<body>
------------------------------ body 시작 --------------------------<br>
<h1>WebContent/jq1/test6.jsp</h1>
------------------------------ body 끝 ----------------------------<br>
</body>

< append() >

- 해당 객체의 뒤쪽에 추가할 수 있는 함수

- 해당 태그요소를 적용하여 사용가능

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('body').append("<h2> append() : 뒤쪽에 추가 </h2>");
	});
</script>

<body>
------------------------------ body 시작 --------------------------<br>
<h1>WebContent/jq1/test6.jsp</h1>
------------------------------ body 끝 ----------------------------<br>
</body>

① append() 이용해서 index 정보 추가하기

- append() 함수 말고도 다른 방법 사용하여 추가할 수 있지만 알아두면 좋으니까 .. !

$('div').append(function(index){
	return "("+index+")";
});

<div>content</div>
<div>content</div>
<div>content</div>

② 테이블에 데이터 삽입하기

- 테이블 태그를 이용하여 body에 <th>만 생성해놓고, 아래 데이터들은 제이쿼리 이용해서 넣어보기

- 1번째 방법)

var arr = [
	{name:'홍길동1',addr:'부산'},
	{name:'홍길동2',addr:'울산'},
	{name:'홍길동3',addr:'서울'},
	{name:'홍길동4',addr:'대구'}
];
			
$.each(arr,function(index,obj){
	$('table').append("<tr><td>"+obj.name+"</td><td>"+obj.addr+"</td></tr>");
});

- 2번째 방법)

$.each(arr,function(index,obj){
  $('table').append(function(){
      return "<tr><td>"+obj.name+"</td><td>"+obj.addr+"</td></tr>";
  });
});

· 위와 같은 코드도 가능 ( 결과 동일함)

<table border="1">
<tr>
	<th>이름</th>
	<th>주소</th>
</tr>
</table>

- obj.name : 오브젝트의 이름을 가져옴

- obj.addr : 오브젝트의 주소를 가져옴

③ 배열 arr 이용하여 p태그 안에 '이름/주소' 형태로 출력하기

- 1번째 방법)

$(arr).each(function(idx,obj){
	$('p').append(obj.name+"/"+obj.addr);
});

<p>0000</p>
<p>1111</p>
<p>2222</p>
<p>3333</p>

· <p> 하나에 배열이 모두 붙음

- 2번째 방법)

$('p').append(function(idx){
	var obj = arr[idx];
	return obj.name+"/"+obj.addr+"<br>";
});

<p>0000</p>
<p>1111</p>
<p>2222</p>
<p>3333</p>

· <p> 하나에 배열 값 하나씩 붙음