jQuery Replace Text in Div,Span, p, Textarea

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

ParameterDescription
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>  

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *