interview

home / developersection / interviews / difference between ‘prop’ and ‘attr’ in jquery?

Ask Question

Difference between ‘prop’ and ‘attr’ in JQuery?

Hemant Patel 2865 03-Mar-2017
jquery jquery 
Updated on 18-Sep-2020
Hemant Patel

Hemant Patel

Follow

Exploring the online world is my passion. have experience of #content writing #SEO #Digital Marketing #On-Page #Lead Generation #Content Analyst #Marketing Analyst... I could never stop at one point, continuously wanted to acquire more and more skills. My work for any organization will be full of passion and hard work.

Can you answer this question?
Answer

1 Answers

Hemant Patel

Hemant Patel

03-Mar-2017

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>

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy