How to Add Attributes to an HTML Element in jQuery? Last Updated : 17 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report To add attributes to an HTML element in jQuery, the attr() method can be used. This allows to set one or more attributes for a selected element, such as id, class, src, and href.Approach: Given an HTML document containing <label>, <input>, and <button> elements. The <input> element contains the type and id attribute. When the user clicks 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: This example shows the use of the above-explained approach. HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src= "https://code.jquery.com/jquery-3.5.1.min.js"> </script> </head> <body style="text-align: center;"> <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> <script> $(document).ready(function () { $("#add-attr").click(function () { $("#addAttr").attr("placeholder", "GeeksforGeeks"); }); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create an HTML element using jQuery ? V vkash8574 Follow Improve Article Tags : JQuery HTML-Attributes jQuery-Questions Similar Reads How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f 1 min read How to Add and Remove HTML Attributes with jQuery? Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery. Below are the possib 2 min read How to select elements by attribute in jQuery ? jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D 2 min read How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) 2 min read How to get custom element attribute data in jQuery ? Apart from attributes, we can also use custom element attributes. In this article, we will learn how to get the value of a custom attribute in an HTML element using jQuery. What is Attribute? The HTML attribute provides information about the element. It decides the behavior of an element. Examples o 3 min read How to create a div element in jQuery ? There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example 2 min read Like