jQuery Get Attribute, Set Attribute, Remove Attribute With Examples [Latest]

jQuery Get Attribute

The most basic components we can manipulate using jQuery is through the attributes and properties of the HTML DOM elements.

Everything is a node in the HTML Document Object Model. The attributes are available through its node properties.

The most common properties include the class name, tag name, id, href, title, rel, search etc.

jQuery gives us the means to manipulate the properties of the HTML elements. We can modify the attributes later on after getting access to those properties.

jQuery Get Attribute Example

jQuery .attr() method is used for getting the value from the first matched element.

In this example ‘title’ attribute of <em> is fetched using the .attr() method in jQuery.

Below images show the output produced by above HTML file.

jQuery Set Attribute

For setting attributes we pass two parameters, name and value in the attr() method. This will set all elements with the named attribute using the value passed by the method.

jQuery set attribute syntax: attr(name, value) – name could be any html attribute.

In below example the value of the ‘alt’ is set using the attr(name, value) method.

Just open the above HTML page into any browser and use developer feature to inspect the elements, below image is for Chrome browser.

Notice that alt attribute value is updated using our jQuery set attribute code.

Attributes are the basic components of the html elements helps to manipulate in jQuery. You can change the attributes in the way you want once you get access to those properties. Many methods are available in jQuery for the modifications of these attributes.

jQuery attribute methods

Some other useful jQuery method to manipulate DOM element attributes are:

1. attr( properties ): We have already seen it’s usage, however we can use this method to set multiple key-value properties too.Syntax: selector.attr({ FirstProperty : First value , second Property: Second value})
   
   $( "img" ).attr({ src: "/images/jquery.gif", title: "jQuery Image", alt: "Sample jQuery Image" });

   1 2 3 4 5 6 7

   $( "img" ).attr({   src: "/images/jquery.gif",   title: "jQuery Image",   alt: "Sample jQuery Image" });

2. removeAttr( name ): This method is used to remove attribute from the matched elements.Syntax: selector.removeAttr( name ) where name is the name of the element’s attribute.$("table").removeAttr("border"); Here the attribute border of the table is removed using this method.
3. hasClass( class ): This method is used to find a specified class is present on the any of the matched elements. It will return a Boolean value.Syntax: selector.hasClass( class )$("p#pID").hasClass("myClass"); – Here myClass is the CSS class name.
4. removeClass( class ): This method is used to remove all the specified classes.Syntax: selector.removeClass( class )$("p#pID").removeClass("myClass"); – Here myClass is the CSS class name
5. html( ): This method is used to find and get the first HTML element from the set of matched HTML elements.Syntax: selector.html( ), for example $( "div" ).html();
6. text( ): This method is used get the combined text contents of matched elements. This method cannot be used for input or form elements.Syntax: selector.text( )
   
   $(document).ready(function() { var title = $("em").attr("title"); $("#divid").text(title); });

   1 2 3 4 5 6

   $(document).ready(function() {      var title = $("em").attr("title");      $("#divid").text(title);    });

   
   In this example text method is used to get the title of the element.

These are the commonly used attribute methods in jQuery. There are many more methods than we have in this list. You can use these methods in a variety of ways in different situations.