CODEWITHSUNDEEP
javascriptjqueryperformance
Mikel
Mikel

Reputation: 6222

.prop() VS .val() .Setting an input text value with jQuery

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

Upvotes: 8

Views: 24881

Answers (6)

Black Mantha
Black Mantha

Reputation: 1275

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);

Upvotes: 0

Andy Hubbard
Andy Hubbard

Reputation: 170

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

Upvotes: 2

challet
challet

Reputation: 972

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.

Upvotes: 0

Albzi
Albzi

Reputation: 15609

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.

Upvotes: 13

Adrian Salazar
Adrian Salazar

Reputation: 5319

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

Upvotes: 6

Siva
Siva

Reputation: 1133

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.

Upvotes: 1

Related Questions