jQuery .text() Method Examples
Have you ever wanted to get the textual value of an element using jQuery? Do you know that you can easily get the content of an element as well as set the content of an element using the jQuery text method? In this article, I am going to show you how to do set/get text value using easy to follow examples. So read on to find out more.
How to use jQuery text method
So what exactly is .text ()?
.text() is a method in jQuery. It is used to get the combined text of all matched elements.
The main advantage of using .text() method is that it can be used in both XML and HTML documents.
To illustrate the usage of .text() method in jQuery, I am assuming that we have set of elements, like the div, checkboxes, labels, etc. in a page. So we are going to see few examples on how to get text & then how to set text of these elements.
Example: Complete HTML + jQuery Code for jQuery .text() method
<html>
<head>
<title>jQuery.text() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<h1>Using .text(); method to Get text</h1>
<div id="my_div1">This is my first div</div>
<br>
<input type="submit" name="sbt_get_div_text" id="sbt_get_div_text" value="Get Div Text">
<p> </p>
<ul id="list_item">
<li>First Item</li>
<li>Second Item</li>
</ul>
<br>
<input type="submit" name="sbt_li_text" id="sbt_li_text" value="Get 2nd LI Item Text">
<p> </p>
<p>
<label>
<input type="checkbox" name="fruits" value="apple" id="fruits_0">
Apple</label>
<br>
<label>
<input type="checkbox" name="fruits" value="mango" id="fruits_1">
Mango</label>
<br>
<label>
<input type="checkbox" name="fruits" value="grapes" id="fruits_2">
Grapes</label>
<br>
</p>
<input type="submit" name="sbt_checkbox_text" id="sbt_checkbox_text" value="Get Selected Checkbox text">
<h1>Using .text(); method to Set text</h1>
<div id="my_div2">This is my second div</div>
<br>
<input type="submit" name="sbt_set_div_text" id="sbt_set_div_text" value="Set Div Text">
<input type="submit" name="sbt_revert_div_text" id="sbt_revert_div_text" value="Revert 2nd Div Text">
<p> </p>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Get/Alert div text when button is clicked
$('#sbt_get_div_text').on("click", function(){
alert($('#my_div1').text());
return false;
});
//Get/Alert 2nd list item text when button is clicked
$('#sbt_li_text').on("click", function(){
alert($('#list_item li:nth-child(2)').text());
return false;
});
//Get/Alert checked checkboxes text when button is clicked
$('#sbt_checkbox_text').on("click", function(){
$('input[name="fruits"]:checked').each(function(index) {
alert( $(this).closest('label').text() );
});
return false;
});
//Set div text when button is clicked
$('#sbt_set_div_text').on("click", function(){
$('#my_div2').text('This is NEW CONTENT for 2nd div');
return false;
});
//Revert back 2nd div text when button is clicked
$('#sbt_revert_div_text').on("click", function(){
$('#my_div2').text('This is my second div');
return false;
});
});
</script>
</body>
</html>Simple, isn’t it?
Do you know of any other ways to use the jQuery text method? Feel free to suggest by commenting below.