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

Question

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:

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

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

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

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

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

Answer 1

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 if you're arguing over speed.

Answer 2

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

Answer 3

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