jQuery Data vs Attr

jQuery | data() vs attr(): Learn about the data() and attr() methods in jQuery along with their applications and usage.
Submitted by Pratishtha Saxena, on February 09, 2023

data() Method

The data() method in jQuery allows you to attach or get some data from the specified element. The data() method has the capacity to store more complex objects than just strings. This is because it stored data in the node object.

Syntax:

$('selector').data('Name','data Value');
$('selector').data('Name');

The name and data value are the two parameters that are to be specified when the data has to be set. Whereas, only the name has to be specified when the data has to be extracted from the element. One of the drawbacks of the data() method over the attr() method is that it does not include DOM manipulations, whereas the later is useful when DOM manipulations are to be handled.

attr() Method

The attribute of an element is the features that it presents. For an HTML element, an attribute can be anything like – representing the text color, the font size, font family, name, id, value, class, effects, etc. These all can be termed as attributes of an element in HTML.

The attr() method in jQuery helps to set or return the attribute of the selected element. When the attribute has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched attribute of the element. When the attribute has to be set, then along with the property name, property value is also to be given.

Syntax:

$('selector').attr('propertyName');
$('selector').attr('propertyName','value');

This method sets the attribute of all the matched elements and returns the attribute value of the first matched element.

jQuery example to demonstrate the data() vs attr() methods

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
      button{
      margin-right: 2%;
      margin-left: 2%;
      }
      .green{
      font-size: larger;
      font-weight: bolder;
      color: green;
      }
      .blue{
      font-size: larger;
      font-weight: bolder;
      color:darkblue;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery Data vs Attr?</h2>
    <h4>Click the buttons to perform the actions accordingly.</h4>
    <button id="one">Data()</button>
    <button id="two">Attr()</button> 
    <hr>
    <p id="1">Welcome to Include Help !!!</p>
    <p id="2">jQuery Tutorial</p>
    <p id="3">Thanks for Visiting !!!</p>
    <hr>
    <h4 id="one"></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){    
        // DATA()    
        $('button#one').click(function(){
            $('p#1').data('Name','Include Help');
            $('h4#one').html('Data Attached (to line 1)  - "' + $('p').data('Name') + '"');
            $('p#1').addClass('blue');
        });
    
        // Attr()
        $('button#two').click(function(){
            $('p#1, p#3').attr('class','green');
            $('p#2').attr('class','blue');
            $('h4#one').html('Attributes Attached');
        });
    });
  </script>
</html>

Output:

How to count number of rows in a table using jQuery?

Check if inputs are empty using jQuery

Comments and Discussions!

Load comments ↻