메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140807_[jquery] html

2014.09.22 22:52 read.132

//<![CDATA[

jquery ....

//]]>


제이쿼리를 넣을 경우 웹표준에 에러가 발생하므로 위와 같이 넣어주면 에러발생을 없애준다.


$("선택자").html();

선택자안의 html을 불러온다.

ex) $("div").html();


$("선택자").html("값");

선택자안의 html의 값을 넣어준다.

ex) $("div").html("<h1>혹성탈출</h1>");


예제1

jq_html_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			p{width:100%;height:17px;}
			img{width:188px;height:268px}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
		$(document).ready(function(){
			$('button').click(function(){
				//var s=$("div").text("혹성탈출");
				var s=$("div").html("<h1>혹성탈출</h1>");
				//html()은 ()안의 html태그가 적용된다.
				//$(엘리먼트).html(); - 엘리먼트 안의 포함된 모든 엘리먼트를 불러온다.
				//$(엘리먼트).html(값); - 엘리먼트 안의 포함된 html형태로 넣어준다.
				var a2=$("#tx").text();
				$("div").html("<img src='images/"+a2+"' alt=''/>"); //웹표준에 에러가 발생하므로 //<![CDATA[내용 //]]>을 넣어준다.
			});
		});
		//]]>
		</script>
	</head>
	<body>
		<p id="tx">1.jpg</p>
		<button>OK</button>
		<div>
			<h1>명랑</h1>
			<p>임진왜란때....</p>
		</div>
	</body>
</html>


예제2

jq_html_2.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			h1{color:#333;font-size:20px}
			p{color:green;font-size:14px}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
		$(document).ready(function(){
			$('button').click(function(){
				var tx=$(this).text();
				$("div").html("<"+tx+">명랑해전</"+tx+">");
			});
		});
		//]]>
		</script>
	</head>
	<body>
		<div>명랑해전</div>
		<button>h1</button><button>p</button>
	</body>
</html>



  1. [2015/09/15] 모바일 코딩에 사용하는 기본 html by 흑묘 (825)

, ,

추가메뉴 목록
위로