---
title: "What is the difference between jQuery's prop() and attr() methods?"  
description: "What is the difference between jQuery's prop() and attr() methods?"  
author: "Revati S Misra"  
published: 2023-05-09  
updated: 2023-05-11  
canonical: https://www.mindstick.com/forum/158249/what-is-the-difference-between-jquery-s-prop-and-attr-methods  
category: "jquery"  
tags: ["jquery", "jquery selectors", "jquery plugins"]  
reading_time: 2 minutes  

---

# What is the difference between jQuery's prop() and attr() methods?

What is the [difference between jQuery](https://www.mindstick.com/forum/159946/what-is-the-difference-between-jquery-and-javascript)'s prop() and attr() [methods](https://www.mindstick.com/articles/13060/runny-nose-remedy-methods-that-work-best)?

## Replies

### Reply by Aryan Kumar

In jQuery, both the `prop()` and `attr()` methods can be used to get and set the values of attributes of DOM elements, but they have some differences in how they work.

The `attr()` method gets or sets the value of an attribute on an element. It works with HTML attributes as well as custom attributes that are not part of the HTML standard. When used to get the value of an attribute, `attr()` returns the value of the attribute as it is specified in the HTML code. When used to set the value of an attribute, `attr()` sets the attribute to the specified value.

For example, consider the following HTML code:

```html
<div id="myDiv" data-myAttr="myValue">Hello, world!</div>
```

To get the value of the `data-myAttr` attribute using `attr()`, you can use the following code:

```javascript
var value = $('#myDiv').attr('data-myAttr');
```

To set the value of the `data-myAttr` attribute using `attr()`, you can use the following code:

```javascript
$('#myDiv').attr('data-myAttr', 'new value');
```

The `prop()` method, on the other hand, gets or sets the value of a property on an element. It is used to get or set the current state of a DOM element, such as its checked state, disabled state, or selected state. When used to get the value of a property, `prop()` returns the current state of the property. When used to set the value of a property, `prop()` sets the property to the specified value.

For example, consider the following HTML code:

```html
<input id="myInput" type="checkbox" checked>
```

To get the checked state of the `myInput` checkbox using `prop()`, you can use the following code:

```javascript
var isChecked = $('#myInput').prop('checked');
```

To set the checked state of the `myInput` checkbox using `prop()`, you can use the following code:

```javascript
$('#myInput').prop('checked', true);
```

In summary, the main [difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) between `attr()` and `prop()` is that `attr()` is used for getting and setting the values of HTML attributes and custom attributes, while `prop()` is used for getting and setting the values of properties on DOM elements, such as checked, disabled, or selected. It's important to use the appropriate method depending on the type of attribute or property you are working with.


---

Original Source: https://www.mindstick.com/forum/158249/what-is-the-difference-between-jquery-s-prop-and-attr-methods

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.