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

목차

1. text() 예제 - 모든 p요소의 내용 변경
2. text() 정의
3. text() 구문
4. text() 예제 - 맨 처음 p요소의 내용 반환
5. text() 예제 - 함수로 요소 내용 설정
6. text() 예제 - <input> 경우 반환/설정
7. text() 예제 - <select> 경우 반환/설정
8. text() 예제 - <textarea> 경우 반환/설정

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>

 

결과보기

text() 예제 - <input> 경우 반환/설정

주의: <input> 경우, 종료태그 없는 태그라서 val() 메서드 이용해야 함.

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<input type="text" id="hz" value="홈짱닷컴">

<script>

// 반환 X 

var hztext = $('#hz').text(); // 반환X

console.log(hztext); 

    

var hzval = $('#hz').val(); // 반환O

console.log(hzval);    

// 설정

$('#hz').text('Homzzang.com'); // 설정X

$('#hz').val('Homzzang.com'); // 설정O

</script>

 

결과보기

text() 예제 - <select> 경우 반환/설정

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<select id="lang">

  <option value="html">html</option>

  <option value="css">css</option>

  <option value="js" selected>js</option>

</select>

<script>

  // 반환

  var langtext = $('#lang option:selected').text();

  console.log(langtext); // js

  

  // 설정

  $('#lang option:selected').text('javascript');

</script>

결과보기

text() 예제 - <textarea> 경우 반환/설정

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<textarea id="hz">홈짱닷컴</textarea>

<script>

// 반환

var hztext = $('#hz').text();

console.log(hztext); // 홈짱닷컴

  

// 설정

$('#hz').text('Homzzang.com');

</script>

결과보기