jQuery에서 html() 메서드와 text() 메서드는 선택한 요소의 내용을 가져오거나 변경합니다.
다음은 각 메서드의 사용 구문입니다.
.html()
.html(htmlString)
.text()
.text(textString)메서드가 인자를 받지 않으면, 선택된 요소의 내용을 가져옵니다. 만약 메서드가 인자를 받았다면, 선택된 요소의 내용을 전달받은 인자로 변경합니다.
다음의 코드 예시를 통해 메서드의 주요 사용 방법을 알아보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
h1 {color: red;}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
let h1_content = $("h1").html() // Get text content value
$("#ex1").html("<h3>The title of this page is " + h1_content + "<h3>"); // Change text content of element
content_html = $("#ex2").html();
content_text = $("#ex2").text();
alert(content_html); // Output : <span>Hello World!</span>
alert(content_text); // Output : Hello World!
});
</script>
</head>
<body>
<h1>Difference between html() and text()</h1>
<p id="ex1"></p>
<p id="ex2">
<span>Hello World!</span>
</p>
</body>
</html>
12행 : html() 메서드를 통해 가져온 h1 태그의 내용을 h1_content 변수에 저장합니다.
13행 : html() 메서드를 통해 id 값이 "ex1"인 요소의 html 내용을 변경합니다.
14~17행의 코드를 통해서 html() 메서드와 text() 메서드의 차이를 알 수 있습니다. html() 메서드는 선택한 요소의 내용에 있는 문자열과 태그 모두를 가져옵니다. 따라서 가져온 내용을 alert하게 되면 16행에서처럼 <span>Hello World!</span>가 나타납니다. html() 메서드의 특징을 사용해서 태그 자체도 바꿀 수 있습니다. 이는 13행에 <h3> 태그를 추가한 것으로 알 수 있습니다.
반면, text() 메서드는 선택한 요소의 내용에 있는 문자열만 가져옵니다. 따라서 가져온 내용을 alert하게 되면 Hello World!가 나타납니다.
728x90
반응형
'Frontend > JQuery' 카테고리의 다른 글
| [jQuery] remove(), empty() 메서드 (0) | 2023.09.22 |
|---|---|
| [jQuery] prop() 메서드 vs attr() 메서드 (0) | 2023.09.21 |
| [jQuery] css() 메서드 (0) | 2023.09.13 |
| [jQuery] addClass(), removeClass() 메서드 (0) | 2023.09.12 |
| jQuery에 대하여 (0) | 2023.09.11 |