jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text()

.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.

문법 1

.text()

선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어

var jb = $( 'h1' ).text();

는 h1 요소의 내용을 변수 jb에 저장합니다.

문법 2

.text( textString )

이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어

$( 'div' ).html( '<h1>Lorem</h1>' );

는 div 요소의 내용을 <h1>Lorem</h1>로 바꿉니다. HTML 태그는 텍스트로 처리합니다.

예제 1

div 요소 안의 내용을 가져와서 그 내용을 출력합니다. 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>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Aenean nec mollis.</h1>
    </div>
  </body>
</html>

예제 2

div 요소 안의 내용을 지우고 새로운 내용을 넣습니다. 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>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Phasellus lacinia tempus.</h1>
    </div>
  </body>
</html>

참고

같은 카테고리의 다른 글
jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!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> ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

<!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() { $( '.check-all' ).click( function() { ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...

jQuery / 동적 셀렉트(select) 만드는 방법

jQuery / 동적 셀렉트(select) 만드는 방법

앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...