Often you need to add text using jQuery. This is very easy to do with the text () method. This method can be used in three ways:

  • text () – returns text;
  • text (myText) – makes a replacement;
  • text (function (index, value)) – makes the replacement according to the function.

   Now consider each option in more detail and with examples.

text() – get text

   In the example below, we consider the case when the selected element has only one internal element with textual information.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
  // Find the element #mydiv, enter text information into the variable myText,
  // which is inside the selected item.
  var myText = $('#mydiv').text();
  
  // Print the variable myText in the tag with id = 'result'
  $('#result').html(myText);
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  <!-- Variable output tag myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

   When executing this code, we get the code:

<body>
  <div id="mydiv">
	<p>Text-1</p>
  </div>
  
  // Added orange background for output block
  <div id="result" style="background-color: orange;">
           Text-1
  </div>
</body>

   If the selected block contains several elements with text information, the text() method will return a string in which the text information of the various elements will be separated by spaces. Below is the code for this case.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
   // Find the element mydiv, put in the variable myText text information,
   // which is inside the selected element.
  var myText = $('#mydiv').text();
  
  // Print the variable myText in the tag with id = 'result'
  $('#result').html(myText);
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<p>Text-3</p>
  </div>
  
  <!-- Variable output tag myText -->
  <div id="result" style="background-color: orange;">
  </div>
</body>
</html>

   The result of doing this:

  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<p>Text-3</p>
  </div>
  
  <!-- Variable output tag myText -->
  <div id="result" style="background-color: orange;">
        Text-1 Text-2 Text-3
  </div>

text (myText) – makes replacement

   The passed myText parameter to the text () method allows the method to completely replace all any nested tags and instead add the myText parameter, which is a text string. Now consider an example and see how it works.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(titleFunc);
function titleFunc() {
   // Find the element #mydiv 
   // Remove all the code inside the div tag with id = 'mydiv' 
   // Put the line 'New text' inside
     $('#mydiv').text('New text');
}
</script>
</head>
<body>
  <div id="mydiv">
	<p>Text-1</p>
	<p>Text-2</p>
	<a href="#">orange-code.ru</a>
	<p>Text-3</p>
  </div>
</body>
</html>

   When executing this code, the following tags will be deleted:

	<p>Text-1</p>
	<p>Text-2</p>
	<a href="orange-code.ru">orange-code.ru</a>
	<p>Text-3</p>

   As a result, we get:

  <div id="mydiv">
      New text
  </div>

text (function (index, value)) – replaces according to the function

   But we got and a bit more complicated way of adding text using jQuery. The point is that the text(function (index, value)) method can work with each block that was selected, separately. When executing the following code, we see that for each block, the first 6 characters of the text information of the block are selected and information about the index of the block itself is added.

<!DOCTYPE html>
<head>
<style>
.mydiv {
	border: 1px dotted gray;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(function (){
    $('.button').click(function(){
       $('.mydiv').text(function(index, text){
                text = text.substr(0,8);
				text = text + " index" + index;
           return text;
       });
    });
});

</script>
</head>
<body>
  <div class="mydiv">
	<p>Text-11111</p>
	<a href="#">orange-code.ru</a>
  </div>
  
  <div class="mydiv">
	<p>Text-22222</p>
	<a href="#">orange-code.ru</a>
  </div>

  <div class="mydiv">
	<p>Text-33333</p>
	<a href="#">orange-code.ru</a>
  </div>
  
  <input type="button" class="button" value="Get the first 6 characters from each block with the class 'mydiv'">

</body>
</html>

Text-1111111111111111

Text-2222222222222222

Text-3333333333333333

Get the first 6 characters from each block with the class ‘mydiv’ and index

   Now we are testing 🙂

1. What will the text() method return if there are several elements with textual information in the selected block?

 
 
 
 

2. What method is not for working with text?

 
 
 
 

3. What does myText mean in the text (myText) method?

 
 
 
 

4. What this command will do $(‘.mydiv’).text (); ?

 
 
 
 

5. What does index mean in the method text(function(index, text)); ?

 
 
 
 

Question 1 of 5

Good programming!