How to find all inputs that don’t have color name and appends text to the span next to it using jQuery ?
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 –
Please Login to comment...