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

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