How to append an text message when an input field is modified in jQuery ?

Last Updated : 25 Mar, 2021

In this article, we will see how to append an element with a text message when an input field is changed in jQuery. To append an element with a text message when the input field is changed, change() and appendTo() methods are used. The change() method is used to detect the change in the value of input fields. This method works only on the “<input>, <textarea> and <select>” elements. The appendTo() method is used to append the elements.

Syntax:

$($selector).change(function() { })

Here, first we use change() method to detect the changes of the input field and appendTo() method is used to display the message.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to append an element with a text message 
        when an input field is changed in jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("#textInput").change(function () { 
                $("<p>Input text has changed.</p>") 
                .appendTo("body"); 
            }); 
        }); 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .clickable_ele { 
            font-size: 20px; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to append an element with a text message 
        <br>when an input field is changed in jQuery? 
    </h3> 
  
    <form action="#"> 
        <input id="textInput" type="text" 
            value="GeeksforGeeks"> 
    </form> 
</body> 
  
</html>