jQuery attr vs prop: Key Differences Explained

In jQuery, both .attr() and .prop() are used to inspect and manipulate element values, but they target two fundamentally different concepts: HTML attributes and DOM properties. While attributes represent the initial values written in the HTML document, properties reflect the current, dynamic state of the DOM node in memory. Understanding this distinction is essential for handling form elements, dynamic states, and custom markup correctly.

Attributes vs. Properties

Attribute (attr): Attributes are defined in the HTML markup text. When the browser parses the HTML, it uses these attributes to initialize the corresponding DOM properties. Values retrieved using .attr() generally represent the default or initial state defined in the HTML source code and are always returned as strings (or undefined).
Property (prop): Properties are native JavaScript variables belonging to the DOM element object. These values change dynamically as the user interacts with the page (e.g., clicking a checkbox or typing into an input field). Values retrieved using .prop() return their native JavaScript types, such as booleans, objects, or numbers.

The Checkbox Example

The most common way to illustrate the difference is with a standard checkbox:

<input type="checkbox" id="newsletter" checked="checked">

When the page loads:

$('#newsletter').attr('checked') returns "checked".
$('#newsletter').prop('checked') returns true.

If a user unchecks the box:

$('#newsletter').attr('checked') still returns "checked" because the underlying HTML attribute has not changed.
$('#newsletter').prop('checked') returns false because the actual DOM state has been updated.

When to Use `.prop()`

Use .prop() for any dynamic state or boolean attribute where the value changes based on user action or where a JavaScript boolean (true/false) is required.

Key use cases include:

Boolean states: checked, selected, disabled, readOnly
Dynamic element properties: selectedIndex, nodeName, nodeType
Checking resolved URLs: Calling .prop('href') returns the full, resolved URL (e.g., https://example.com/about), whereas .attr('href') returns the exact text written in the HTML tag (e.g., /about).

When to Use `.attr()`

Use .attr() when you need to read or write the literal HTML markup as it was declared in the document.