//<![CDATA[
jquery ....
//]]>
제이쿼리를 넣을 경우 웹표준에 에러가 발생하므로 위와 같이 넣어주면 에러발생을 없애준다.
$("선택자").html();
선택자안의 html을 불러온다.
ex) $("div").html();
$("선택자").html("값");
선택자안의 html의 값을 넣어준다.
ex) $("div").html("<h1>혹성탈출</h1>");
예제1
<!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
<!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>
- [2015/09/15] 모바일 코딩에 사용하는 기본 html (827)
댓글 0
댓글 쓰기 권한이 없습니다.
> | 140807_[jquery] html | 2014.09.22 |