[jQuery] text() & html()

티스토리 뷰

WEB/jQuery

[jQuery] text() & html()

춘햄 2021. 6. 7. 10:24

jQuery 내에서 html() 함수를 통해 마치 JS의 innerHtml처럼 html 구문을 작성할 수 있는데, 마찬가지로 text() 함수를 이용하여 비슷한 동작을 수행할 수 있다.

둘의 차이점은 다음과 같다고 보면 된다.

- text() : text => text
- html() : text => text

text() 함수는 조금 독특한 특징을 가지고 있는데, 바로 get과 set개념을 사용한다는 점이다.

즉,

- ( ) 내에 어떤 값이 없을 경우 => get
- ( ) 내에 어떤 값이 있을 경우 => set

와 같이 사용할 수 있다는 점이다.

1. get

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>텍스트 값 가져오기 및 설정</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			//text() : <b>text</b> => <b>text</b>
			// html() : <b>text</b> => text
			//text 함수의 특징:
				// () 내에 어떤 값이 없을 경우 => get
				// () 내에 어떤 값이 있을 경우 => set 

			// 1. <b>의 텍스트들을 한꺼번에 추출
			var  text = $('b').text();
			alert(text);
				
        });
    </script>

</head>

<body>

    <div>
        안녕하세요. <b>jQuery</b><br />
        반갑습니다. <b>JavaScript</b><br />
        <p>또 만나요.</p>
        <p>언제요?</p>
    </div>

</body>

</html>

2. set

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>텍스트 값 가져오기 및 설정</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			//text() : <b>text</b> => <b>text</b>
			// html() : <b>text</b> => text
			//text 함수의 특징:
				// () 내에 어떤 값이 없을 경우 => get
				// () 내에 어떤 값이 있을 경우 => set 

			// 1. <b>의 텍스트들을 한꺼번에 추출
			var  text = $('b').text();
			//alert(text);
			
			$('p:first').text("<b>first</b>");
			$('p:last').hrml("<b>last</b>")
			
        });
    </script>

</head>

<body>

    <div>
        안녕하세요. <b>jQuery</b><br />
        반갑습니다. <b>JavaScript</b><br />
        <p>또 만나요.</p>
        <p>언제요?</p>
    </div>

</body>

</html>

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

[jQuery] 요소의 반복 each() (0)	2021.06.07
[jQuery] form 태그 내 입력 값, 선택 값 제어 (0)	2021.06.07
[jQuery] removeAttr() (0)	2021.06.07
[jQuery] attr()의 다중 속성 제어 (0)	2021.06.07
[jQuery] attr() 를 이용한 이미지 출력 (0)	2021.06.07