[jQuery] 요소의 조작 | 요소 내부 변경 .html() 과 .text()

javascript/jQuery

[jQuery] 요소의 조작 | 요소 내부 변경 .html() 과 .text()

데브워니 2022. 5. 16. 17:23

기존 요소의 내부 변경

메소드	설명
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.

.html() 메소드

.html()메소드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다.

<!DOCTYPE html>
<html lang="ko">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .html() </title>
  	<style>
		.wrap { color: red }
	</style>
    <script>
		$(function() {
        	$("button").on("click", function() {
            	$("p").html("<div class='wrap'>devyaeoni입니다.</div>");
			});
      	});
    </script>
</head>
<body>
	<h1>.html() 메소드</h1>
	<p>안녕하세요.</p>
	<button>문장 변경</button>
</body>
</html>

결과)

.text() 메소드

.text()메소드는 선택한 요소의 내용을 단순 text로 변경한다.

<!DOCTYPE html>
<html lang="ko">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .html() .text() 차이점</title>
  	<style>
		.wrap { color: red }
	</style>
    <script>
		$(function() {
        	$("button").on("click", function() {
            	$("p").text("<div class='wrap'>devyaeoni입니다.</div>");
			});
      	});
    </script>
</head>
<body>
	<h1>.text() 메소드</h1>
	<p>안녕하세요.</p>
	<button>문장 변경</button>
</body>
</html>

결과)

[참고] : https://www.devkuma.com/