.text().text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. Show 문법 1.text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h2' ).text(); 는 h2 요소의 내용을 변수 jb에 저장합니다. 문법 2.text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h2>Lorem</h2>' ); 는 div 요소의 내용을 <h2>Lorem</h2>로 바꿉니다. HTML 태그는 텍스트로 처리합니다. 예제 1div 요소 안의 내용을 가져와서 그 내용을 출력합니다. div 요소가 여러 개 있으면 모든 내용을 가져옵니다. HTML 태그는 제외한다는 것에 주의합니다. <!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var jbText = $( 'div' ).text();
alert( jbText );
} );
</script>
</head>
<body>
<div>
<h2>Lorem ipsum dolor.</h2>
</div>
<div>
<h2>Aenean nec mollis.</h2>
</div>
</body>
</html> 예제 2div 요소 안의 내용을 지우고 새로운 내용을 넣습니다. div 요소가 여러 개 있으면 모든 요소에 적용됩니다. 삽입하는 내용에 있는 HTML 태그는 태그가 아니라 텍스트로 인식합니다. <!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'div' ).text( '<p>Aenean nec mollis.</p>' );
} );
</script>
</head>
<body>
<div>
<h2>Lorem ipsum dolor.</h2>
</div>
<div>
<h2>Phasellus lacinia tempus.</h2>
</div>
</body>
</html>참고
< 속성의 값 가져오기 >- html() : 해당하는 요소의 가장 처음 대상의 값만 가져옴 · 요소의 자식 태그들의 태그나 문자열을 모두 읽어옴 - text() : 해당하는 모든 요소의 값을 가져옴 · 단순 text로 읽어옴 ① 속성의 값 출력하기 · <h2>의 맨 처음 값만 가져온다. · <h2>의 값 전부를 가져온다. ② 속성의 값 변경하기 - 변경하고자 하는 텍스트를 ( )안에 넣어주면 된다. - 속성 값에 연결연산자(+)를 이용하여 붙여줄 수도 있다. · 여기서 ht는 위에 코드블럭에 있듯이 $('h2').html() 값이다. - html()도 text()와 마찬가지로 값을 변경가능하다 ③ 속성 값 변경시 html()과 text() 차이 - html( ) : 태그 등 해당 요소를 적용해서 변경 - text( ) : 텍스트 그대로 받아들여서 새로운 텍스트로 변경 · html()은 "<h3>"을 실제 태그로 인식을 해서 html Method() 사용이라는 글자에 적용했음 · text()는 " " 안에 들어있는 모든 문자열을 텍스트로 인식해서 출력했음 ④ html(), text() 안에 function 사용하기 - function(index, text)가 매개변수로 들어가야한다. - div 안에 들어가는 값을 변경해보겠다. ( "인덱스 + ** + 기존의 문자 + @@" ) - index는 div의 순서로 0부터 시작한다 - text는 div의 값(정보)로 위에서 진행한 코드(<h3> ~~ Method() 사용 </h3>)로 적용된다 |
Jquery div 내용 가져오기 - jquery div naeyong gajyeoogi
저작권 © 2024 berikutyang Inc.
