jQuery - Get & Set Content
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 asExample:input
,select
andtextarea
.
//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.