.prop（）VS .val（）。使用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 val ue 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, eg, 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

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.

Answer 4

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

Answer 5

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.

Answer 6

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