.html()
문법
.html()
요약
엘리먼트 모음의 첫번째 엘리먼트의 contents를 구한다.
인자
없음
반환값
엘리먼트 모음의 첫번째 엘리먼트의 contents
설명
이 메서드는 XML 문서에서는 쓸 수 없다. HTML 문서에서, .html() 메서드는 엘리먼트의 contents를 구하는데 사용할 수 있다. 선택자 표현(selector expression)으로 찾은 결과가 한 개 이상의 엘리먼트인 경우, 그 중 첫번째 엘리먼트의 HTML content 만이 반환될 것이다.
몇몇 브라우저는 원래 문서의 HTML 소스를 정확히 복사한 HTML을 반환하지 않을 수도 있다. 예를 들어, 인터넷 익스플로러에서는 반환값이 알파벳과 숫자로만 이루어져 있다면, 가끔 속성값 주위에 있는 인용부호를 빼먹기도 한다.
예제 1
아래 예제에서 $('div.demo-container').html();의 리턴 값은 엘리먼트가 div이며, class명이 demo-container인 엘리먼트들의 그룹 중에 첫번째 엘리먼트의 내용 즉, <div class="demo-box">Demonstration Box</div>를 리턴한다.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<script type="text/javascript">
alert($('div.demo-container').html());
</script>
예제 2
아래 예제는 p 엘리먼트에 click 이벤트 핸들러를 설치한 후에 사용자가 p엘리먼트를 클릭하면 이벤트가 실행(trigger)되면해 해당 엘리먼트의 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-latest.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(); // 이벤트가 발생한 엘리먼트의 html 내용(contents)을 html변수에 활당
$(this).text(htmlStr); // 이벤트가 발생한 엘리먼트의 html 내용(contents)을 html 상에서 해석되지 않는 html entitie로 변환해서 치환
});
</script>
</body>
</html>
참고
.html(htmlString | function(index,oldhtml))
문법
.html(htmlString) .html(function(index, oldhtml))
요약
선택된 엘리먼트들의 html 내용(contents)을 주어진 인자로 치환한다.
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| htmlString | string | 필수 | 변경할 HTML 내용 |
| function(index, oldhtml) | function | 필수 | 선택된 엘리먼트 그룹의 각 엘리먼트들의 html 내용이 변경될 때 호출되면서 그 리턴값이 htmlString과 동일한 역활을 한다. 첫번째 인자인 index는 해당 엘리먼트가 선택된 엘리먼트의 그룹에서 몇번째에 해당하는 지를 알려주는 index 값이고, oldhtml은 변경되기 전의 html contents를 알려준다. jQuery는 이 함수가 호출되기 전에 html contents을 제거하기 때문에 이 인자가 필요하다. 본 함수 안에서 this는 선택된 엘리먼트 셋 중 현재 실행되고 있는 엘리먼트를 의미한다. |
반환값
선택된 엘리먼트 셋에 대한 jQuery object
설명
.html()이 선택된 엘리먼트 셋 중 첫번째 엘리먼트에 대한 html contents를 구하는 명령어(get)인 반면, html(htmlString)이나, html(function(index, oldhtml))은 엘리먼트 셋에 해당하는 모든 엘리먼트에 대한 html contents를 변경(set)하는 메소드다.
본 메서드는 브라우저의 innerHTML 속성을 이용한다. 일부 브라우저는 html소스와 정확하게 일치하지 않는 DOM을 만들어낸다. 이를테면 ie8의 경우 모든 href의 속성을 절대경로로 변경한다. ie9의 경우 HTML5의 소스를 정확하게 반영하지 못할 수 있다. 그리고 인터넷 익스플로러 9.0 이전 버전에서는 별도로 compatibility layer를 추가하지 않으면 HTML5 엘리먼트를 제대로 다루지 못할 수도 있다.
예제 1
아래의 예제는 div엘리머트 중 demo-container 클래스를 가진 엘리먼트의 그룹의 html contents를 <p>All new content. <em>You bet!</em></p>로 교환하는 예
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<script type="text/javascript">
$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
</script>
</body>
</html>
예제2
아래의 예제는 html의 인자로 function을 전달한 경우의 예제다. html 메소드를 이용해서 문서내의 모든 p엘리먼트에 대해서 html contents를 변경한다. 변경 과정에서 각 엘리먼트는 인자로 전달한 함수가 실행되는데 인자인 index와 oldhtml에 의해서 각 p 엘리먼트는 숫자가 붙은 one, two, three로 변환된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>one</p>
<p>two</p>
<p>three</p>
<script type="text/javascript">
$('p').html(function(index,oldhtml) {
return index+','+oldhtml;
});
</script>
</body>
</html>
예제3
html 메소드를 이용해서 선택된 엘리먼트들의 html contents를 변경하고, 변경된 html을 기준으로 다이나믹하게 엘리먼트를 제어하는 예제
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
