Getting and setting content [text(), html() and val()]

Thao tác đơn giản nhất với DOM là thiết lập text, giá trị và HTML. Text là nội dung bên trong của một element, giá trị là dạng của element và HTML giống text nhưng bao gồm các markup.

Rất may cho chúng ta, jQuery có cả ba phương thức thao tác: text(), html() và val(). Hãy xem ví dụ sau đây để cho chúng ta biết sự khác biệt giữa chúng:

<div id="divTest">
	<b>Test</b>
	<input type="text" id="txtTest" name="txtTest" value="Input field" />
</div>

<script type="text/javascript">
$(function()
{
	alert("Text: " + $("#divTest").text());
	alert("HTML: " + $("#divTest").html());
	alert("Value: " + $("#divTest").val());
	
	alert("Text: " + $("#txtTest").text());
	alert("HTML: " + $("#txtTest").html());
	alert("Value: " + $("#txtTest").val());
});
</script>

So a call to one of these methods with no parameters will simply return the desired property. If we want to set the property instead, we simply specify an extra parameter. Here's a complete example:

<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />

<script type="text/javascript">
$(function()
{
	$("#divText").text("A dynamically set text");
	$("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
	$("#txtTest").val("A dynamically set value");
});
</script>

And that's how easy it is to set text, HTML and values.

These three functions comes with one overload more though, where you specify a callback function as the first and only parameter. This callback function will be called with two parameters by jQuery, the index of the current element in the list of elements selected, as well as the existing value, before it's replaced with a new value. You then return the string that you wish to use as the new value from the function. This overload works for both html(), text() and val(), but for the sake of simplicity, we only use the text() version in this example:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

<script type="text/javascript">
$(function()
{
	$("p").text(function(index, oldText) {
		return "Existing text: " + oldText + ". New text: A dynamically set text (#" + index + ")";
	});
});
</script>

We start out with three similar paragraph elements, which text is their only difference. In the jQuery code, we select all of them and then use the special version of the text() method to replace their current text with a newly constructed text, based on the two parameters that jQuery provides for us: The index of the current element as well as its current text. This new text is then returned to jQuery, which will replace the current text with the new one.