Open In App

How to find all inputs that don’t have color name and appends text to the span next to it using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given some input elements and the task is to find all inputs that don’t have the name = “color” and append text to the span next to it using jQuery. In simple words, we have to find all the input with the name != “color” and then we have to append some text next to the span element.

Used Method:

  • next() method: This method is used to return the next sibling element of the selected element.
  • append() method: This method is used to insert the specified content at the end of the selected elements.

Approach:

  • Create an HTML page with different input names and at least one name should be color.
  • Next, select the input which does not have name = “color”.
  • Write a message after each span element that does not have a name = “color”.

Example: In this example, we will use the above approach.

HTML




<!DOCTYPE html>
<html>
 
<head>
    </script>
 
    <style type="text/css">
        body {
            text-align: center;
            font-size: 20px;
        }
 
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksForGeeks</h1>
    <h2>choose colors name from the below list.</h2>
    <div>
        <input type="checkbox" name="color" value="Red">
        <span>Green</span>
    </div>
    <div>
        <input type="checkbox" name="animal" value="good">
        <span>Tiger</span>
    </div>
    <div>
        <input type="checkbox" name="birds" value="fly">
        <span>Birds</span>
    </div>
    <br>
    <button id="button1">Click to see the effect</button>
 
    <script>
        $('#button1').click(function () {
            $("input[name!='color']").next()
                .append("<b>: This is not a color</b>");
        });
    </script>
</body>
 
</html>


Output:

 



Last Updated : 16 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads