---
title: "Difference between ‘prop’ and ‘attr’ in JQuery?"  
description: "Difference between ‘prop’ and ‘attr’ in JQuery?"  
author: "Hemant Patel"  
published: 2017-03-03  
updated: 2020-09-18  
canonical: https://www.mindstick.com/interview/23225/difference-between-prop-and-attr-in-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# Difference between ‘prop’ and ‘attr’ in JQuery?

Major difference between ‘prop’ and ‘attr’ , we can get value of custom attributes by using attribute (attr) but we can’t get value of custom attribute by using ‘prop’.

\
We only get pre-defined attributes value by ‘prop’ but we can’t able to get value of custom attribute by using ‘prop’.

\

## Example of 'prop':

\

```
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title>Difference Between prop and attr in JQuery </title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script>        $(function () {            console.log($('#txtName').prop("id"));        });    </script></head><body>    <input type="text" name="txtName" id="txtName" value="Pawan" pawan="Pawan
Shukla"
/></body></html>
```

**Example of 'attr':**

```
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title>Difference Between prop and attr in
JQuery </title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script>        $(function () {            console.log($('#txtName').attr("pawan"));        });    </script></head><body>    <input type="text" name="txtName" id="txtName" value="Pawan" pawan="Pawan
Shukla"
/></body></html>
```

## Answers

### Answer by Hemant Patel

Major difference between ‘prop’ and ‘attr’ , we can get value of custom attributes by using attribute (attr) but we can’t get value of custom attribute by using ‘prop’.

\
We only get pre-defined attributes value by ‘prop’ but we can’t able to get value of custom attribute by using ‘prop’.

\

## Example of 'prop':

\

```
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title>Difference Between prop and attr in JQuery </title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script>        $(function () {            console.log($('#txtName').prop("id"));        });    </script></head><body>    <input type="text" name="txtName" id="txtName" value="Pawan" pawan="Pawan
Shukla"
/></body></html>
```

**Example of 'attr':**

```
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title>Difference Between prop and attr in
JQuery </title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script>        $(function () {            console.log($('#txtName').attr("pawan"));        });    </script></head><body>    <input type="text" name="txtName" id="txtName" value="Pawan" pawan="Pawan
Shukla"
/></body></html>
```


---

Original Source: https://www.mindstick.com/interview/23225/difference-between-prop-and-attr-in-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
