< 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> 하나에 배열 값 하나씩 붙음
'자바 웹 개발자가 될거야 > JSP' 카테고리의 다른 글
| [Eclipse] 이클립스 서버 시작 45초 타임아웃 오류 해결방법 (0) | 2021.12.30 |
|---|---|
| [JQuery] Jquery(제이쿼리) each()로 배열 접근하기 (0) | 2021.12.28 |
| [JQuery] Jquery(제이쿼리) 클래스명 부여하기 addClass() (0) | 2021.12.28 |
| [JQuery] Jquery(제이쿼리) setInterval() 일정주기 반복하기 (0) | 2021.12.28 |
| [JQuery] Jquery(제이쿼리) html(), text() 속성의 값 가져오기 (0) | 2021.12.28 |
