jQuery change/replace text; In this tutorial, you will learn how to change or replace text of selected html elements like div, span, p, etc using jQuery text() by id, class, attribute. And as well as how to get html elements text using the jQuery text() method.
jQuery Change/replace Text
The .text() method in jQuery is used to get or set the text content of HTML elements. This method is part of the jQuery library, which is a popular JavaScript library designed to simplify HTML document traversal and manipulation, as well as event handling and animation.
Syntax of jQuery text() method
$(selector).text()
This is used to return content.
$(selector).text(content)
This is used to set content.
$(selector).text(function (index, currentcontent))
Text() method is used to set content by calling function.
Parameters of text() method
| Parameter | Description |
|---|---|
| Content | It is used to set the new text content for the element. |
| Function (index,currentcontent) | It is used to specify a function that will return the new text content for the selected elements. index:- It returns the index position of the element. currentcontent:- It returns the current content of element. |
Example 1 of jQuery replace paragraph Text
Let’s see example 1 of the text() method to change or replace paragraph text:
<!DOCTYPE html>
<html>
<title>Learn Jquery text Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
$("#para").text("Hello there, this is example");
});
});
</script>
</head>
<body>
<button id="btn_click">Click here to change the content</button>
<p id="para">This is a paragraph. When you click the button after that it will change.</p>
</body>
</html>
Example 2 – jQuery get text element
Let’s see example 2 of text() method, How to get the text inside an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Text Content Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".plain-text").click(function(){
alert($(".plain").text());
});
$(".formatted-text").click(function(){
alert($(".formatted").text());
});
});
</script>
</head>
<body>
<p class="plain">This is plain text.</p>
<p class="formatted">This <strong>is</strong> formatted <b> text </b> .</p>
<button type="button" class="plain-text">Plain Text</button>
<button type="button" class="formatted-text">Formatted Text</button>
</body>
</html>
Example 3 – jQuery replace/change div text By Id
Let’s see below the example for how to replace the current text using the text() and replace() function of jquery.
<!DOCTYPE html>
<html>
<head>
<title> jQuery replace text </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body style = "text-align:center;">
<div class="text_div">
This div contains some text.
</div>
<button id="btn-click">Click</button>
<script>
$(document).ready(function(){
$(".text_div").text(function () {
return $(this).text().replace("contains", "Hello replace");
});
});
</script>
</body>
</html>
