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", "neveropen");
});
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", "neveropen"); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color: green;"> neveropen </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:
