Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

Output:


My Personal Notes arrow_drop_up
Last Updated : 25 Mar, 2021
Like Article
Save Article
Similar Reads
Related Tutorials