jQuery change/replace Text

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

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

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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