.html()
원문 링크 
http://api.jquery.com/html/
함수들
html()
- .html()
html( htmlString )
- .html( htmlString )
- .html( funtion(index, oldhtml) )
개요 : 일치하는 요소 내부의 html을 문자열로 반환한다.
- .html()
html() 함수는 XML 문서에는 사용할 수 없습니다.
HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠.
이 구문은 div 태그들중 demo-container 라는 클래스명을 가지고 있는 첫번째 요소를 선택하여 그 안의 내용을 가져오게 됩니다. 만약 아래와 같이 html 구조가 되어있다면
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div>
결과는 아래와 같이 됩니다.
이 메소드는 브라우져의 innerHTML 속성을 이용한 것입니다. 때로는 원본 문서의 html이 정확하게 복제되지 않기도 합니다. 예를 들어, Internet Explorer 는 속성값에 숫자형 문자가포함되어 있을때 주위에 따옴표를 붙이기도 합니다.(라고 하는데요 정확한 번역이 아닐수도 있습니다. 직접해봐야 겠지만 말이죠.)
예 제
클릭하면 html 소스를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
</body>
</html>미리보기
클릭해보세요. 그 화면을 구성하고 있는 html을 보실 수 있습니다. 계속 클릭해도 뭔가를 계속 바꿔줍니다.
개요 : 일치하는 요소 내부에 새로운 html 문자열을 추가한다.
- .html( htmlString )
- htmlString 새로 추가될 html 소스
- .html( function(index, oldhtml) )
- function(index, oldhtml) 이 함수는 새로 추가될 html을 반환합니다. 기존의 html을 인자로 받아서 index에 해당하는 위치에
html() 함수는 XML 문서에는 사용할 수 없습니다.
.html() 함수를 내용을 추가하는 용도로 사용하면 그 요소안의 내용은 새로운 요소로 완전히 바뀌게 됩니다. 아래 예제를 보시죠.
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div>
<div class="demo-container"> 요소 안의 내용을 바꾸기 위해서는 아래와 같이 하면 됩니다.
$('div.demo-container')
.html('<p>All new content. <em>You bet!</em></p>');jQuery 1.4 버젼에 와서 .html() 함수는 HTML 내용을 바꾸기 위해서 함수를 사용할 수 있게 되었습니다.
$('div.demo-container').html(function() {
var emph = '<em>' + $('p').length + ' paragraphs!</em>';
return '<p>All new content for ' + emph + '</p>';
});만약 문서상에 p 태그가 6개가 있다면 위 예제는 <div class="demo-container"> 요소 안에 <p>All new content for <em>6 paragraphs!</em></p> 라는 새로운 html 을 추가하게 됩니다.
이 함수는 브라우져의 기본 함수인 innerHTML을 이용한 것입니다. 그런데 어떤 브라우져에서는 이 함수가 정확하게 적용되지 않기도 합니다. 예를 들어 IE8 이전의 브라우져에서는 href 속성의 URL을 완벽히 지원하는 데 반해 IE9 이전 버젼의 브라우져(IE8이라고 표현안했네요.)에서는 호환 레이어(compatibility layer)가 추가되지 않은 HTML5 다루는 것이 항상 정확하지는 않습니다.(음.. IE8이전은 잘 작동하는데 IE8버젼은 HTML5가 정확히 지원이 되지 않아 원하는데로 작동이 잘 안될 수도 있다는 얘기인 것 같습니다. 신빙성 없으니 원본을 보시는 편이 더 좋으실 듯 합니다. ^^;;;)
예 제
div 태그안에 html 소스를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>
미리보기
Hello Again 이라는 빨간 텍스트가 추가되었습니다.
예 제
html()함수로 html을 추가한 뒤, append() 함수를 사용해 느낌표를 더 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
$("div").html("<b>Wow!</b> Such excitement...");
$("div b").append(document.createTextNode("!!!"))
.css("color", "red");
</script>
</body>
</html>
미리보기
html() 함수에는 원래 느낌표가 하나인데 append() 함수를 사용해서 빨간색 느낌표를 추가된 것을 보실수 있습니다.
innerHTML 과 대동소이한 함수입니다. innerHTML 을 사용하셔도 좋고 html() 함수를 사용하셔도 크게 다를 건 없겠네요. 단 jQuery 객체에서는 innerHTML 사용이 되지 않으니 사용하기 위해 일반 자바스크립트 변수를 사용해야 하는 부분은 있어 보입니다. 걍~ html() 함수 쓰시라는 얘기와 별반 다를게 없네요. 하하하;;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |
|---|---|
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
| jQuery API 정복 - 클래스가 있나 찾기, hasClass() (5) | 2011.03.03 |
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |
| jQuery API 정복 - addClass(), 클래스 추가하기 (5) | 2011.02.25 |
| jQuery API 정복 - 눈에 보이는 요소 찾기 : visible (5) | 2011.02.24 |