목차
- text() 예제 - 모든 p요소의 내용 변경
- text() 정의
- text() 구문
- text() 예제 - 맨 처음 p요소의 내용 반환
- text() 예제 - 함수로 요소 내용 설정
- text() 예제 - <input> 경우 반환/설정
- text() 예제 - <select> 경우 반환/설정
- 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>
결과보기
