How to add attributes to an HTML element in jQuery?
Last Updated :
09 Feb, 2021
Given an HTML document containing some elements and the task is to add the attributes to the HTML elements.
Approach: Given an HTML document containing <label>, <input> and <button> elements. The <input> element contains the type and id attribute. When user click on the button, the jQuery function is called. We use $(selector).attr() method to add the attributes. Here, we are adding the placeholder attribute to the input field.
Syntax:
$("#add-attr").click(function () {
$("#addAttr").attr("placeholder", "GeeksforGeeks");
});
Example:
HTML
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
</ script >
< script >
$(document).ready(function () {
$("#add-attr").click(function () {
$("#addAttr").attr("placeholder", "GeeksforGeeks");
});
});
</ script >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h4 >
How to add attributes to an HTML element in jQuery?
</ h4 >
< label for = "addAttr" ></ label >
< input type = "text" id = "addAttr" >
< button id = "add-attr" >Add Placeholder Attribute</ button >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...