Difference between attr, prop and val

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 info about an HTML element - for example <input id="some_id" value="some_value"> basically they are the things with name="value" in HTML constructs

Now 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

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

The jQuery.attr() will give the value of the first matching attribute in the original HTML file, while jQuery.prop() will give the value of that same object but instead fetches it from the populated DOM structure.

In many cases the returned item will be the same - but keep in mind one is the current state vs the original state.

attr() only returns String while .prop() return other types of value. For example, after jQuery 1.6, .attr() will return a string "selected" , "checked" for selected, checked attributes While .prop will return "true" for selected, checked attributes

<form>
 <select>
    <option value="option1">Red</option>
    <option value="option2">Black</option>
 </select>
  <input type="checkbox" name="check" checked> I agree
</form>

In the HTML above you could use .val() on the option elements to retrieve "option1" and "option2". You might also be able to use .attr("value") to retrieve those values, since "value" is the attribute name. You could use .prop("checked") to see if the checkbox is checked. jQuery treats attributes without "values" as simple properties - this is from their documentation:

"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

<input id="the-input" type="text" value="Name:">

The value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:

theInput.value // returns "John"

whereas:

theInput.getAttribute('value') // returns "Name:"

The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.

So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute:

theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"