Получение и изменение контента [text(), html() and val()]

Простейший аспект манипуляции с DOM - это получение и изменение текста, значений и HTML. Эти три пункта могут показаться одним и тем же, но это не так. Текст (text) - это текстовое (без HTML) представление внутреннего содержания элемента, значения (value) есть у элементов форм, а HTML содержит не только текст, но и все теги разметки.

К счастью для нас, в jQuery есть методы для каждого из трех случаев, что позволяет нам и получать, и устанавливать эти свойства. Это методы text(), html() и val(). Вот небольшой пример, который демонстрирует разницу между ними, и насколько просто их использовать:

<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>

Таким образом, вызов каждого из трех методов без параметров просто вернет значение соответствующего свойства. Если мы хотим, наоборот, задать свойство, нужно добавить параметр. Вот пара примеров:

<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>

Вот так просто можно устанавливать текст, HTML и значения.

Эти три функции имеют еще одну перегрузку, которая содержит один единственный параметр - callback-функцию. Эта функция будет вызвана jQuery с двумя параметрами: индексом текущего элемента в списке элементов и его значением до вызова функции. Сама функция должна возвращать строку, которая станет новым значением элемента. Эта перегрузка работает и для html(), и для text(), и для val(), но для простоты мы рассмотрим ее работу только для text():

<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>

В начале у нас есть три почти одинаковых абзаца. В коде jQuery мы выбираем их все, и затем используем специальную версию метода text(), чтобы заменить текущий текст на новый сгенерированный нами и основанный на двух предоставленных параметрах: индексе текущего элемента и его тексте. Этот новый текст возвращается jQuery, и он заменит старый текст на новый.