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:
