midjQuery
What is the difference between .prop() and .attr() in jQuery?
Updated May 14, 2026
Short answer
.attr() works with HTML attributes while .prop() works with DOM properties representing the current element state.
Deep explanation
Understanding the difference between attributes and properties is crucial for DOM manipulation.
Attributes:
- Defined in HTML markup.
- Represent initial values.
- Retrieved using .attr().
Properties:
- Represent current live state of DOM elements.
- Managed by the browser.
- Retrieved using .prop().
Example: For a checkbox:
- checked attribute → initial HTML state
- checked property → current runtime state
jQuery introduced .prop() in version 1.6 to correctly separate DOM properties from attributes.
Best practice:
- Use .attr() for static HTML attributes.
- Use .prop() for dynamic UI state.
Real-world example
Form-heavy enterprise systems often use .prop() to manage checkbox states, disabled fields, and interactive controls dynamically.
Common mistakes
- Using .attr('checked') to determine checkbox state after user interaction often returns incorrect results.
Follow-up questions
- Why was .prop() introduced?
- Which method should be used for checkbox state?
- Can .attr() modify attributes dynamically?