jQuery replace text in textarea, div, span, p, button tag; Through this tutorial, i am going to show you how to replace text in textarea, div, span, p, button tag using jQuery text() method
jQuery Replace Text in Div,Span, p, Textarea
- Defination of Text() Method
- Syntax jQuery Text() Method
- Parameters of jQuery text() method
- Example 1 – jQuery Replace Text in Div
- Example 2 – jQuery Replace Text in Span Tag
- Example 3 – jQuery Replace Text in P(paragraph) tag
- Example 4 – jQuery Replace Text in Textarea
Defination of Text() Method
The text () method is used for set or return the content of the selected HTML elements. When setting content, it overwrites the content of all matching elements. This returns the content of the text method () is used to return the text content of all matching elements.
Syntax 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 jQuery 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 – jQuery Replace Text in Div
See the example 1 of how to replace text in div using jQuery text() method; as shown below:
<!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(){
$("#my-div").text("Hello there, this is example");
});
});
</script>
</head>
<body>
<button id="btn_click">Click here to change the content</button>
<div id="my-div">This is a paragraph. When you click the button after that it will change.</div>
</body>
</html>
Example 2 – jQuery Replace Text in Span Tag
See the example 2 of how to replace text in span tag using jQuery text() method; as shown below:
<!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(){
$("#my-span").text("Hello there, this is example");
});
});
</script>
</head>
<body>
<button id="btn_click">Click here to change the content</button> <br>
<span id="my-span">This is a paragraph in span tag. When you click the button after that it will change.</span>
</body>
</html>
Example 3 – jQuery Replace Text in P(paragraph) tag
See the example 3 of how to replace text in p tag or paragraph tag using jQuery text() method; as shown below:
<!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 4 – jQuery Replace Text in Textarea
See the example 4 of how to replace text in textarea using jQuery text() method; as shown below:
<!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(){
$("#my-textarea").text("Hello there, this is example");
});
});
</script>
</head>
<body>
<button id="btn_click">Click here to change the content</button> <br><br>
<textarea id="my-textarea" rows="4" cols="50">This is a paragraph. When you click the button after that it will change.</textarea>
</body>
</html>