.prop() versus .data()

Question

With the new release of jQuery v1.6 and the addition of the .prop() method.

Is there an inherent difference in using .prop() over .data() ?

I see in the documentation that not removing a property can result in memory leaks in versions of IE prior to IE9. But are there any other performance issues or other issues with using the new prop() method?

Syntax from the site:

var $para = $("p");    
$para.prop("luggageCode", 1234);

Over the following:

var $para = $("p");
$para.data("luggageCode", 1234);

score 16 · Accepted Answer · answered May 03 '11 at 18:01

16

I believe prop is intended for setting valid HTML document properties, rather than arbitrary data. I'd suggest you continue to use data for luggageCode type info.

answered May 03 '11 at 18:01

Andiih

12,285
10
57
88

This is my thought as well but can you cite any docs that back up this claim? And this also doesn't answer the question about performance issues. – styfle Feb 06 '13 at 19:47
1

Also data("foo","bar") will set not – Andiih Nov 25 '14 at 17:14
2

Actually `data("foo","bar")` will set the *data* on the jQuery object and **will not** set the HTML DOM element attribute (for that you would need `attr("data-foo", "bar")` [also `prop("data-foo", "bar")` **will not** add anything to the DOM]). – Kamafeather May 26 '15 at 16:48
Clarification: the `data` method _can_ retrieve `data-*` attribute data, but it cannot change it. For example, if `` is in the DOM, `$("elm").data("foo")` will return `"foo"` unless `$("elm").data("foo", "bar")` is called first, then it would return `"bar"` and `` would remain unchanged. So it's best to use `attr` to get and set any `data-*` variables to eliminate possible confusion. – Mxt Mar 05 '21 at 21:33

score 7 · Answer 2 · answered May 21 '11 at 14:56

I think it comes down to the difference between a property of the DOM Node, and a property of the Javascript object that represents it.

The documentation does not specify how or where .data() data is stored, so the fact that you're seeing it as a property of the relevant jQuery object may just be an implementation detail. jQuery would be permitted to store it absolutely anywhere else, too.

In contrast, .prop() of course relates explicitly to properties of the DOM Node.

score 3 · Answer 3 · answered May 03 '11 at 18:25

I may be going about this wrong, but it seems that .data() can be enumerated, while .prop() cannot.

Live Demo

var $p = $("<p>");
    $p.data('luggagecode', '12345');
    $p.data('luggagecode_backup', '54321');

for (var key in $p.data()) { // generates two alerts
    var value = $p.data(key);
    alert('DATA | '+key+' = '+value);
}

var $p2 = $("<p>");
    $p2.prop('luggagecode', '12345');
    $p2.prop('luggagecode_backup', '54321');

for (var key in $p2.prop()) { // no alerts
    var value = $p2.prop(key);
    alert('PROP | '+key+' = '+value);
}

I'm not going to downvote you because you're on the right track, but properties can definitely be [enumerated](http://jsfiddle.net/h3uee/). I think you should revise this answer and say that `.data()` is for user defined data and `.prop()` actually adds/updates a property on the DOM element. — styfle, Feb 06 '13 at 19:43

.prop() versus .data()

3 Answers3

Linked