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
Now we are testing 🙂
Good programming!
Leave a Reply