8

After reading (the interesting) .prop() vs .attr() and jQuery Performance : attributes doubt arise in my mind about what is better to use: .prop() or .val() ? I want to set an input text value.

The jQuery .prop() page said the following:

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.

But regarding to performance .prop() seems to be better than .val() setting values: .prop() vs .attr() vs .val()

So I don't have an answer. What I should do?

$('#element').prop('value', 'Example');

or

$('#element').val('Example');

EDIT1: .prop() is always better than .val() enter image description here enter image description here enter image description here

EDIT2: I've tried now getting a value, also .prop() is faster enter image description here

EDIT3: As @BeatAlex says if we want performace native js is extremely faster

var x = document.getElementById('element').value;

enter image description here

As some of you said it may be faster, but if .val() exist we'd use it.

PS: while I am writing this, current jQuery version is 1.11 or 2.1

Community
  • 1
  • 1
Mikel
  • 5,902
  • 5
  • 34
  • 49
  • 1
    I'd recommend using `val()` purely because it's a function to get the value (duh), and the operation of that function may need to change in the future but your code would not. – Reinstate Monica Cellio Feb 28 '14 at 11:15
  • Don't worry about this kind of performance, you will never have to set thousand of elements value at once, at least, you shoudln't – A. Wolff Feb 28 '14 at 11:29
  • I've just discovered the existence of .prop() and I was looking for good practices :-) – Mikel Feb 28 '14 at 11:31

6 Answers6

13

You want to use val(). That's what the function is for, specifically for the value of the input.

It's also quicker to write, easier to understand and while using val, you can change the value multiple times if need be.

Your chart says

Higher is better

and val() higher.

Also, like you've already quoted,

The .val() method should be used for getting and setting value.

This means that unless you're dealing with disabled properties, use:

$('input').val();

Also as a side note, the link you posted, after running tests, shows that val() is faster than prop().

Since you LOVE to show some graphs and pictures, i'm going to add some:

Taken from this link

Pure JS is better

Pure JS is better if you're arguing over speed.

Albzi
  • 15,431
  • 6
  • 46
  • 63
  • I agree with you that .val() is more logical but regarding to performance I don't agree. I'll upload screenshots – Mikel Feb 28 '14 at 11:29
  • I've edited my first post and uploaded screenshots when you can see that .prop() is always better. I've gone further and done another jsperf this time getting the value(no setting). Also .prop() is better, it's a fact. As people said might be better use .val() because it is made for that, but faster is .prop() – Mikel Feb 28 '14 at 11:51
  • If we're going into the speed of things, you're better off using plain javascript rather than jquery and just use `element.value` @OceanicSix – Albzi Feb 28 '14 at 11:54
  • 1
    Actually, scrap that. Look at this: http://jsperf.com/jquery-val-vs-element-value/3 @OceanicSix – Albzi Feb 28 '14 at 11:56
6

Dude, you cannot compare prop to val, that makes no sense!

val is designed to set/get the attribute "value" from the current selected node(s). So that's the only method you need for your use-case. (I want to set an input text value).

Of course you can workaround val by using attr('value') or prop('value') but why do you want to make boilerplate code?

You seem to be confused on what prop was designed for. So let me explain a little.

prop was designed to solve the issue of retrieving Boolean-like properties from the selected DOM node. It should be compared to the method attr not to val

Consider the following four cases

<input type="checkbox" checked />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />
  • You will never ever get the state checked/unchecked of the input using val()
  • You are not sure what is the checked state of the control if you retrieve it using attr('checked'). This will give you back a string.
  • If you use the result of attr('checked') inside of an if statement, you are at risk of getting false positives, e.g., if('false')

The only way to consistently get the checked state out of the control is by using the prop method.

So if you wanna make a real comparison please compare it to attr, not to val

Adrian Salazar
  • 5,279
  • 34
  • 51
  • So what did I say wrong? I don't get your point. You are just confirming my point – Adrian Salazar Feb 28 '14 at 11:37
  • Did you actually read my post? I never said in your case use prop. I just say that what he's doing is *wrong*. And that the comparison is complete useless. So dont make a big drama and dont put words in my mouth that I never said. – Adrian Salazar Feb 28 '14 at 11:40
  • 1
    Oh man I did read it completely wrong! Reword the first sentence! I assumed you were saying using `val` was non sense! If you read the rest of the post like that then you can see where i'm coming from! I'll give you +1 because it makes sense to me NOW, but maybe change the wording of the first sentence! – Albzi Feb 28 '14 at 11:41
  • 1
    +1 for you too, fast and correct answer. I just want the kid to actually learn what is the problem that prop solves. – Adrian Salazar Feb 28 '14 at 11:56
2

The other answers explain the main differences pretty well with one exception.

Since jQuery "normalizes" browser differences val() removes carriage returns.

This affects textareas in IE 8 and below.

Example: For the textarea input of

HEL


LO

.val() gives you the string "HEL\n\nLO" and a length of 7

.prop("value") gives you the string "HEL\r\n\r\nLO" with a length of 9

Izaak van Dongen
  • 2,450
  • 13
  • 23
Andy Hubbard
  • 118
  • 8
1

Your charts are indicating that prop() is better than val() in terms of performance.

val() could be internally using the same logic of prop() along with some additional code statements for completing the actual operation(Ex: setting value), that additional code of val() might lead to little low performance than prop().

It would be nice to use val() for setting a value for an element perhaps that is what this function is meant for, in general it's preferred to go with the operation specific functions instead of using the generic ones.

In your case, if you don't want to loose even a slight variation in performance then go with prop() itself.

Siva
  • 1,123
  • 2
  • 14
  • 25
0

That's not a question of performance, they are actually made for quite different things. jQuery seems to have decided to handled "out of spec" usecase, probably for good reason.

  • attr() is to access the HTML attribute of the element. More probably the initial value as when the page loaded. It though has been altered by the write version of attr() or any other attribute manipulation function
  • prop() is to access the DOM property of the element, after it has been parsed and displayed.
  • val() is to access a form element value.
challet
  • 870
  • 9
  • 21
0

One more bug when using prop(). Under IE 11, the following code wouldn't set the value:

var props = {'value':'test', 'type':'radio'};
var input = $('<input/>').prop(props);
$(document.body).append(input);
Black Mantha
  • 1,147
  • 8
  • 11