jQuery: .attr() vs .prop()

Original state Vs. Current state

Both attr() and prop() are used to get or set the value of the specified property of an element attribute, but attr() returns the default value (Original state) of a property whereas prop() returns the current value (Current state). Attributes provide additional information about an HTML element : for example < input id="some_id" value="some_value" > basically they are things with name="value" in HTML constructs the point though what is contained in the original HTML file . Once the HTML is loaded and placed into the DOM HTML structure, then it becomes a node in that tree and it becomes a property of that node. Content wise those things are the same, except if you modify.

$("#p2").text($('#txtInput').attr('value') + " - With .attr()"); $("#p3").text($('#txtInput').prop('value') + " - With .prop()");

Browser View

Change the input value and click the button...

Full Source

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery.attr() Vs. jQuery.prop()</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#p1").text("Initial Value with .attr()...." + $('#txtInput').attr('value')); $('#btn1').click(function() { $("#p2").text($('#txtInput').attr('value') + " - With .attr()"); $("#p3").text($('#txtInput').prop('value') + " - With .prop()"); }); }); </script> </head> <body> <p id="p1"></p> <div>Change the input value and click the button...</div> <br> <input type="text" id="txtInput" value="First Value"> <button id="btn1">Click Me</button> <p id="p2"></p> <p id="p3"></p> </body> </html>

jQuery.attr() Vs. jQuery.prop()

.attr() changes attributes for that HTML tag.
.prop() changes properties for that HTML tag as per the DOM tree.

In many cases the returned item will be the same - but keep in mind one is the current state Vs. the original state . JQuery is a changing library and sometimes they make regular improvements. The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behaviour . As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work. So, it is advised that if you are using a later version of JQuery you should use .prop() whenever possible.

Next : How do I check if an element is hidden in jQuery?

Related Topics