jQuery 를 사용하여 html 에서 데이터나 태그를 삽입하고 삭제 할 수 있다.
예제 코드를 보면서 확인 하도록 하겠다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
<script>
function sub(){
var api= new jGCharts.Api();
jQuery('<br>').appendTo("#line1");
//line1 이라는 div 영역 안에 <br> 태그를 추가한다
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
jQuery('#line1').append("1234");
//문자열 삽입
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
//jQuery('br').remove();
//<br> 태그 전부 삭제... (이런 방식으로 태그를 삭제 가능함)
jQuery('<img>')
.attr('src',api.make({
title :'LBS',
data : [[100],
[40],
[70]
],
//1번째 y축 데이터 3개 (ting,ju,family)=> 1월 =>[110,2200,600]
//2번째 y축 데이터 3개 (ting,ju,family)=> 2월 =>[120,2300,700]
//3번째 y축 데이터 3개 (ting,ju,family)=> 3월 =>[400,300,100]
type : 'lc',
size : '1000x250',
colors : ['000000'],
grid : [20,50,3,3,10,20],
legend : [encodeURIComponent('친구찾기')],
axis_type : ['x,y'],
//axis_range : [[0,10],[90,100]]
axis_labels : ['11-1','11-2','11-3']
})).appendTo("#line1");
//lc,lxy
}
</script>
</head>
<body onload="sub()">
<div id="line1">
</div>
</body>
</html>
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
<script>
function sub(){
var api= new jGCharts.Api();
jQuery('<br>').appendTo("#line1");
//line1 이라는 div 영역 안에 <br> 태그를 추가한다
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
jQuery('#line1').append("1234");
//문자열 삽입
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
jQuery('<br>').appendTo("#line1");
//jQuery('br').remove();
//<br> 태그 전부 삭제... (이런 방식으로 태그를 삭제 가능함)
jQuery('<img>')
.attr('src',api.make({
title :'LBS',
data : [[100],
[40],
[70]
],
//1번째 y축 데이터 3개 (ting,ju,family)=> 1월 =>[110,2200,600]
//2번째 y축 데이터 3개 (ting,ju,family)=> 2월 =>[120,2300,700]
//3번째 y축 데이터 3개 (ting,ju,family)=> 3월 =>[400,300,100]
type : 'lc',
size : '1000x250',
colors : ['000000'],
grid : [20,50,3,3,10,20],
legend : [encodeURIComponent('친구찾기')],
axis_type : ['x,y'],
//axis_range : [[0,10],[90,100]]
axis_labels : ['11-1','11-2','11-3']
})).appendTo("#line1");
//lc,lxy
}
</script>
</head>
<body onload="sub()">
<div id="line1">
</div>
</body>
</html>
jQuery 를 사용하여 이미지를 만들고 <br> 태그 삽입 1234 같은 텍스트 문자열 삽입
삭제 하는 코드입니다.
'JQUERY > 태그안의 내용 추가,삭제' 카테고리의 다른 글
[JQUERY] 태그 안의 값 가져오기 또는 접근하기 (1) | 2011.03.22 |
---|
댓글