• 회원가입
  • 로그인

[HTML_CSS] JQ - text() 메서드 - 선택요소 텍스트 내용설정/내뇽변경/내용반환. (= text메서드 = 텍스트메서드)

목차

  1. text() 예제 - 모든 p요소의 내용 변경
  2. text() 정의
  3. text() 구문
  4. text() 예제 - 맨 처음 p요소의 내용 반환
  5. text() 예제 - 함수로 요소 내용 설정

 

text() 예제 - 모든 p요소의 내용 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").text("홈짱닷컴 Homzzang.com");

  });

});

</script>


<button>클릭</button>

<p>홈페이지 제작관리</p>

<p>서버관리 코딩교육</p>


결과보기

 

text() 정의

 

선택요소의 TEXT 내용을 반환/설정.

※ 「반환」 경우, 모든 일치 요소의 TEXT 내용을 반환.

※ 「설정」 경우, 모든 일치 요소의 TEXT 내용을 설정.

 


cf.

html() 메서드: 선택요소의 HTML 내용을 반환/설정.

 

 

text() 구문

 

TEXT 내용 반환.

$(selector).text()

 

TEXT 내용 설정.

$(selector).text(content)

 

선택요소의 색인번호와 현재 텍스트를 받는 콜백함수로 TEXT 내용 설정.

$(selector).text(function(index,currentcontent))

 


[매개변수]

 

content

필수. 입력할 내용. 

  • HTML 포함 불가. 
  • 태그에 사용되는 특수문자는 단순 텍스트로 인코딩 됨.

 

function(index,currentcontent)

선택. 입력할 내용 반환하는 함수 지정. 

  • index - 선택요소의 색인번호를 독립변수로 받음.
  • currentcontent - 선택요소의 현재 텍스트 내용을 독립변수로 받음. 

 

 

text() 예제 - 맨 처음 p요소의 내용 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("p").text());

  });

});

</script>


<button>클릭</button>

<p>홈짱닷컴 <b>Homzzang.com</b></p>

<p>코딩언어 그누보드 강의</p> 

 

결과보기

 

text() 예제 - 함수로 요소 내용 설정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").text(function(n){

      return "p 요소 색인번호: " + n;

    });

  });

});

</script>


<button>클릭</button>

<p>홈짱닷컴 Homzzang.com</p>

<p>코딩언어 그누보드 강의</p>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012