.html()
선택한 요소 내부의 HTML을 읽거나 변경합니다.
.html()
선택한 요소 내부의 HTML을 읽거나 변경합니다.
문법(Syntax)
$("선택자").html();
$("선택자").html("문자열");
$("선택자").html("함수");
정의(Definition)
- .html() 메서드는 선택한 요소의 HTML 태그를 가져옵니다.
- .html("문자열") 메서드는 선택한 요소를 문자열로 변경합니다.
- .html("함수") 메서드는 선택한 요소에 함수를 설정합니다.
Sample1 
.html() : 리스트의 첫 번째 html을 가지고 와서 출력해주는 예제입니다.
결과
속성(Attributes)
- .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
var htmlString = $(".select1").html();
alert (htmlString);
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
var textString = $(".select2").text();
alert (textString);
});html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li class="select1">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li class="select2">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.select1:before {content:'.select1'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.select2:before {content:'.select2'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li class="select1">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li class="select2">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="btn1">클릭하면 select1의 <em>.html()</em> 값을 경고창으로 알려줍니다.</a>
<a href="#" class="btn2">클릭하면 select2의 <em>.text()</em> 값을 경고창으로 알려줍니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
var htmlString = $(".list1 li:eq(0)").html();
alert (htmlString);
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
var textString = $(".list1 li:eq(1)").text();
alert (textString);
});
</script>
</body>
</html>Sample2
.html() : 리스트 마지막에 html 요소를 넣어주는 예제입니다. .text()는 태그를 인식하지 못하기 때문에 태그를 문자로 인식하여 출력합니다.
Sample2
속성(Attributes)
- .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice2 .off1").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").html(".nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다. ");
});
$(".choice2 .btn1").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").html(".nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다. ");
});
$(".choice2 .btn2").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").text(".nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다. ");
});html
<h3>속성(Attributes)</h3>
<div class="list2">
<ul>
<li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list2">
<ul>
<li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice2">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>.html()</em> 메서드로 요소를 넣어줍니다.</a>
<a href="#" class="btn2">클릭하면 <em>.text()</em> 메서드로 요소를 넣어줍니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice2 .off1").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").html("<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
});
$(".choice2 .btn1").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").html("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
});
$(".choice2 .btn2").on("click", function(e){
e.preventDefault();
$(".list2 li:last-child").text("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
});
</script>
</body>
</html>호환성(Compatibility)
| 메서드 | 버전 |  |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| html() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
| jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
