Updated March 21, 2023
Introduction to jQuery text()
jQuery text() method is an HTML method used for retrieving or assigning the XML or HTML content from the web page. While used for setting, it actually overwrites all the matching elements. When used for retrieving the elements, it fetches all the matched elements along with the text content. jQuery not only works on HTML, it can also be used for XML and XHTML documents. The syntax used for the purpose of set text content is ‘$(selector).text(content)’ and the syntax used for the purpose of retrieving text content is ‘$(selector).text()’.
Syntax of jQuery text()
Syntax of jQuery text() are given below.
Syntax:
- To return text content:
$(selector).text()- To set text content
$(selector).text(content)- To set text content using a function
$(selector).text(function(index, currentcontent))where:
- a selector is the selected HTML element.
- content is a mandatory parameter that specifies the new text content to be set for the selected elements.
- function(index, currentcontent) is an optional parameter that specifies the function which when executed will return the new text content for the selected elements.
- index returns the index position of the selected element.
- currentcontent returns the current content of the selected element.
Examples to Implement jQuery text() Method
Let us take a look at some examples to understand the implementation and working of the jQuery text() method.
Example #1
The following example demonstrates how the text() method can be used to return the content of the selected elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery text()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 600px; height: 400px; padding: 20px; font-size: medium; text-align: center; margin: auto;
font-weight: bold; border: 3px solid teal; margin-top: 50px; margin-bottom: 10px;
}
p {
color: brown; font-size: large;
}
button { background: teal; color: cyan;
border-radius: 30px; padding: 15px;
font-weight: bold; border: none; margin: auto; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
alert($("p").text());
});
});
</script>
</head>
<body>
<div>
<p>This is an example for jQuery <b>text()</b> method.</p>
<p>Here we are returning the text content of the selected paragraph.</p>
<br />
<button>Click to <b>return</b> the content.</button>
</div>
</body>
</html>Output:
- In the above example, we are using the jQuery text() method to return the text content for the selected paragraph p.
- The below screenshot shows a div with some content in a paragraph and a button.
- This screen displays when the page is first loaded in the browser.
- Once the button is clicked, an alert box pops up displaying the text content of the selected paragraph.
Example #2
Let us now consider an example demonstrating the setting of the content by text() method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery text()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 600px; height: 300px; padding: 90px; font-size: medium; text-align: center; margin: auto;
font-weight: bold; border: 3px solid teal; margin-top: 50px; margin-bottom: 10px;
}
p {
color: brown; font-size: large;
}
button { background: teal; color: cyan;
border-radius: 30px; padding: 15px;
font-weight: bold; border: none; margin: auto; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").text(
"Content overwritten.This is how we set content using jQuery text() method"
);
});
});
</script>
</head>
<body>
<div>
<h3>Welcome to the jQuery tutorial.</h3>
<p>Here we are going to learn about jQuery <b>text()</b> method.</p>
<br />
<button>Click to <b>set</b> the content.</button>
</div>
</body>
</html>Output:
In this example, we are using the text() method to set the text content of the selected paragraph p by passing the required text to the text() method as a parameter.
As soon as the button is clicked, the text content of the selected paragraph gets overwritten by the new text content which is passed as a parameter to the method.
Example #3
Let us now see how the text() method sets the text content using a function.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery text()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 600px; height: 400px; padding: 60px; font-size: medium; text-align: center; margin: auto;
font-weight: bold; border: 3px solid teal; margin-top: 50px; margin-bottom: 10px;
}
p {
color: brown; font-size: large;
font-weight: normal;
}
button { background: teal; color: cyan;
border-radius: 30px; padding: 15px;
font-weight: bold; border: none; margin: auto; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").text(function(index) { return (
"This is element no. " + (index + 1) + " with index " + index
);
});
});
});
</script>
</head>
<body>
<div>
<h3>Welcome to the jQuery tutorial.</h3>
<p>Here we are going to learn about jQuery <b>text()</b> method.</p>
<p>
jQuery <b>text()</b> method sets the content by overwriting the current content.
</p>
<p><b>index</b> returns the index position of the selected element.</p>
<p>
<b>currentcontent </b> returns the current content of the selected element.
</p>
<br />
<button>Click to <b>set</b> the content.</button>
</div>
</body>
</html>Output:
In this example, the text() method is being used to set the text content of the selected paragraphs by passing a function to the method.
Once the button is clicked, the following output is produced.
Conclusion
- This jQuery article demonstrated the effect and ways of implementing the jQuery text() method.
- This method is used to get the combined text content of the selected elements as well as their child elements or is used to set the text content for the selected elements.
- It returns a string consisting of the combined text content of all the matched elements.
- For setting the text content, this method can be used in two ways, one by setting the content to a specified text passed as a parameter to the text() method and another way is by passing in a function.
Recommended Articles
This is a guide to jQuery text(). Here we discuss the Introduction and Syntax of jQuery text() along with different examples and its code implementation. You may also look at the following articles to learn more –
