What actually is Attributes?
Attributes carry additional information about an HTML element and come in name=”value” pairs. we can set an attribute for HTML element and define it while writing the source code.
<input id=”test” value=”test” type=”test”>
here, “type”,”value”, “id” are attributes of the input elements.
What is Property?
Property is a representation of an attribute in the HTML DOM tree. once the browser parse your HTML code ,corresponding DOM node will be created which is an object thus having properties.
in above case ,once browser renders the input, other properties like align, alt, autofocus, baseURI, checked so on will be added …
since, attr() gives the value of element as it was defines in the html on page load. It is always recommended to use prop() to get values of elements which is modified via javascript/jquery , as it gives the original value of an element’s current state.
Use prop () over attr () in the majority of cases.
prop () is the current state of the input element, attr () is the default value.
prop () can contain things of different types, attr() can only contain strings.
.attr changes the attributes for that html tag.
.prop changes a property for the html tag as per the DOM tree.
Ex–<input type=”text” value=”abc”>. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop(“value”) is abcdef but the .attr(“value”) remains abc.
An input field can have the attribute “value”. This will equal the default value that entered. If the user changes the value in the input field, the property “value” changes in the DOM Tree, but the original attribute is left remaining.
So basically, if we want the default value setup for an HTML tag’s attribute, use the .attr() function. If that value can be changed by the user (such as inputs, checkbox’s, radios, etc.) use the .prop() function to get the newest value.
jquery attr() vs prop() (difference)
according to the docs(jQuery docs) jQuery.attr()
- Get the value of an attribute for the first element in the set of matched elements.
whereas,jQuery.prop()
- Get the value of a property for the first element in the set of matched elements.
Before jQuery 1.6, the attr() method sometimes took property values into account when retrieving some attributes, which caused in inconsistent behavior. And thus, the prop() method was introduced. As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
Ex—in view file:
<input id =”inp1″ value=”st123″ blah=”hello”>
In js file:
$(‘#inp1’).prop(‘value’,’ppq’);
alert($(‘#inp1’).attr(‘value’)); —output:’st123’;
alert($(‘#inp1’).prop(‘value’)); —output:’ppq’;
but if use following attr keyword instead of prop
$(‘#inp1’).attr(‘value’,’ppq’);
alert($(‘#inp1’).attr(‘value’)); —output:’ppq’;
alert($(‘#inp1’).prop(‘value’)); —output:’ppq’;