Attribute value VS property value

Question

I have an <input> element which is loaded with a default value. Later on, i change that value via jQuery's input.val("different value") .

When I console.log() the element, I see this in firebug:

Object[input.cs_required.form-control.input-sm property value = "12/29/2014" attribute value = "12/02/2014"]

• Why are there two different values assigned to the input?
• What is the difference between the property value and the attribute value?
• Should I be concerned?

Answer 1

Quick example of the difference:

jQuery('#something').val() changes the *.value property. jQuery('#something').attr('value','neValue') changes the attribute on that component.

There is an important difference between the two. Take a look at this for more info.

What's the difference between jQuery .val() and .attr('value')?

The only thing you have to worry about is whether you are using/assigning/utilizing the correct item - property or attribute .

Answer 2

As you said, you are providing a default value via the value HTML attribute. That will be the initial value of the DOM element's value property . Changing the propery does not affect the attribute.

The value of HTML attributes is often used as initial value for the corresponding DOM property.