Today Yewon Learned

[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/

 

'javascript > jQuery' 카테고리의 다른 글

[jQuery] input value 실시간 감지 하기  (0) 2023.06.14
[jQuery] jQuery 적용하기  (0) 2021.12.03
[jQuery] 요소의 조작  (0) 2021.11.11
[jQuery] CSS 스타일 및 프로퍼티 설정  (0) 2021.11.11
[jQuery] 요소의 선택  (0) 2021.11.10
'javascript/jQuery' Related Articles more
Comments