Is it possible to do ".value +=" in JQuery?

Question

Classic javascript:

var myvar = document.getElementById("abc");
abc.value += "test";
abc.value += "another test";

Jquery:

$("#abc").val($("#abc").val()+"test");
$("#abc").val($("#abc").val()+"another test");

Is there a way to make my Jquery prettier, maybe with a hidden += function that I could use? I know that .val() is not an attribute, but I feel there must be a way to make this code more beautiful to look at...

Something like this would be great:

 $("#abc").valueAttribute += "test"
 $("#abc").val().content += "test"
 $("#abc").val().add("test")

Answer 1

You could go back to the original DOM element.

 $("#abc").get(0).value += "test";

Otherwise, you'd have to write a plugin

 $.fn.appendVal = function (newPart) {
   return this.each(function(){ $(this).val( $(this).val() + newPart); });
 };

 $("#abc").appendVal("test");

Answer 2

Since jQuery 1.4, it is possible to pass a function to .val() which gets the current value as second argument:

$("#abc").val(function(i, val) {
    return val + "test";
});

Answer 3

I've never come across anything like that, doesn't mean it doesn't exist though.

I usually just store val() in a temporary variable and do the manipulation on that, then call val(temp) in a separate line. It spreads the operation out to three or more lines, but it's still more readable than .val(.val() + ""), IMO. It also scales better than +=, if you have a more complicated expression to do to the value.

var temp = $(".abc").val();
temp += "test";
$(".abc").val(temp);

Answer 4

$() returns a selection; it doesn't return the actual resulting object (although in practice, it simply returns a list of the actual objects). If you want to mutate the object's .value property, you can do this:

$('.abc').each(function(){ this.value += foo; });

If you like, you can create functions that operate on selections, such as .add(), which could be implemented like this:

jQuery.fn.extend({ add: function(k,v) { this[k](this[k]()+v); } });

which can then be used like this:

$('.abc').add('val', foo);

...but I don't think this is any better than using $().each()