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: