text()

Returns the combined text contents of each element in the first matched element, including its descendants, or set the text contents of the first matched element.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

In above example $("#divContainer").text() will produce following result:

Test Content list start item 1 item 2

text(text)

Sets specified text as content in each matched elements.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

In above example $("#divContainer").text("Input Text") will produce following result:

<div class="divContainer">
Input Text
</div>

text(function)

Sets result of specified function as content in each matched elements.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

Set content by passing function:

$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

In this code function runs for every list item. For every next list item, number increases.

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item number 1</li>
<li>item number 2</li>
</ul>
</div>

html()

Returns the HTML content of first matched element from the set of matched elements.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

In above example $("#divContainer").html() will produce following result:

<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>

html(htmlstring)

Sets specified html as content in each matched elements.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

In above example $("#divContainer").html("<p>Input Text</p>") will produce following result:

<div class="divContainer">
<p>Input Text</p>
</div>

html(function)

Sets result HTML of specified function as content in each matched elements.

Example:

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item 1</li>
<li>item <b>2</b></li>
</ul>
</div>

Set content by passing function:

$( "ul li" ).text(function( index ) {
  return "item number <b>" + ( index + 1 ) + "</b>";
});

In this code function runs for every list item. For every next list item, number increases.

<div id="divContainer">
<p>Test Content</p>
list start
<ul>
<li>item number <b>1</b></li>
<li>item number <b>2</b></li>
</ul>
</div>

The main difference between text() and html() is that text() gets/sets raw data and html() gets/sets html data.

val()

Returns the current value of the first element in the set of matched elements. When the element is a multiselect element, the returned value is an array of all selections.

This method is primarily used to get the values of form elements such as input, select and textarea.

Example:

//Gets the value of first name text box
$("input#txtFirstName").val();

// Get the value from Country dropdown
$("select#ddlCountry").val();

val(value)

Sets specified value in each matched elements.

Example:

//Sets value "Manish" in first name text box
$("input#txtFirstName").val('Manish');

//Set value 2 in Country dropdown
$("select#ddlCountry").val(2);

val(function)

Sets result of specified function as value in each matched elements.

Example:

$( "input:text.items" ).val(function( index, value ) {
  return value + " " + this.className;
});

This example appends the string "items" to the text inputs' values.