Skip to content
Related Articles

Related Articles

Improve Article
How to find all inputs that don’t have color name and appends text to the span next to it using jQuery ?
  • Last Updated : 23 Apr, 2021

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

Used Method:

  • next() method: This method is used to returns 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 do not have name = “color”.
  • Write a message after each span element which does not have name = “color”.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script 
    </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 – 



Before clicking the button –

After clicking the button – 




My Personal Notes arrow_drop_up
Recommended Articles
Page :