Example of jquery setting text value (setting text box DIV form value)_jquery

jquery setting content - text(), html() and val()

We will use the same three methods from the previous chapter to set the content:

text() - Sets or returns the text content of the selected element
html() - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the value of a form field

The following example demonstrates how to set content through the text(), html() and val() methods:

Example

Copy code The code is as follows:

$("#btn1"). click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function() {
$("#test3").val("Dolly Duck");
});

Callback functions of text(), html() and val()

The three jQuery methods above: text(), html() and val() also have callback functions. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value.

The following example demonstrates text() and html() with callback functions:

Example

Copy code The code is as follows:

$("#btn1"). click(function(){
$("#test1").text(function(i,origText){
return "Old text: " origText " New text: Hello world!
(index: " i ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " origText " New html : Hello world!
(index: " i ")";
});
});