[JQuery] Jquery(제이쿼리) html(), text() 속성의 값 가져오기

자바 웹 개발자가 될거야/JSP

whitz 2021. 12. 28. 12:00

- html() : 해당하는 요소의 가장 처음 대상의 값만 가져옴

· 요소의 자식 태그들의 태그나 문자열을 모두 읽어옴

- text() : 해당하는 모든 요소의 값을 가져옴

· 단순 text로 읽어옴

① 속성의 값 출력하기

$(function(){
var ht = $('h2').html();
alert(ht+"@@@@");
			
var tx = $('h2').text();
alert(tx);
});

<h2>head-0</h2>
<h2>head-1</h2>
<h2>head-2</h2>

· <h2>의 맨 처음 값만 가져온다.

· <h2>의 값 전부를 가져온다.

② 속성의 값 변경하기

- 변경하고자 하는 텍스트를 ( )안에 넣어주면 된다.

$('h2').text("hello");

<body>
	<h2>head-0</h2>
	<h2>head-1</h2>
	<h2>head-2</h2>
</body>

- 속성 값에 연결연산자(+)를 이용하여 붙여줄 수도 있다.

$('h2').text(ht+"@@@@");

· 여기서 ht는 위에 코드블럭에 있듯이 $('h2').html() 값이다.

- html()도 text()와 마찬가지로 값을 변경가능하다

$('h2').html("안녕하세요");

③ 속성 값 변경시 html()과 text() 차이

- html( ) : 태그 등 해당 요소를 적용해서 변경

- text( ) : 텍스트 그대로 받아들여서 새로운 텍스트로 변경

$('div').html("<h3>html Method() 사용</h3>");
$('div').text("<h3>text Method() 사용</h3>");

<div>0000</div>
<div>1111</div>
<div>2222</div>

· html()은 "<h3>"을 실제 태그로 인식을 해서 html Method() 사용이라는 글자에 적용했음

· text()는 " " 안에 들어있는 모든 문자열을 텍스트로 인식해서 출력했음

④ html(), text() 안에 function 사용하기

- function(index, text)가 매개변수로 들어가야한다.

- div 안에 들어가는 값을 변경해보겠다. ( "인덱스 + ** + 기존의 문자 + @@" )

- index는 div의 순서로 0부터 시작한다

- text는 div의 값(정보)로 위에서 진행한 코드(<h3> ~~ Method() 사용 </h3>)로 적용된다

$('div').html(function(index,text){
	return index+"**"+text+"@@";
});
			
$('div').text(function(index,text){
	return index+"**"+text+"@@";
});