Содержимое элементов

Библиотека jQuery представляет нам удобный инструментарий для работы с содержимым элемента в виде методов html и text.

Работа с разметкой

Для получения или установки разметки используется метод html, который имеет следующие варианты использования:

• html(): получает разметку html первого элемента в наборе

• html('новая_разметка'): устанавливает в качестве разметки элемента код html, переданный в качестве параметра

• html(функция): установка разметки с помощью функции

Получим и изменим разметку элемента:

// получение разметки для элемента списка и вывод ее в консоль
var html = $('li.punkt2').html();
console.log(html);
	
// установка новой разметки элемента списка
$('li.punkt1').html("Пункт 1 <ul class='submenu'><li>Подпункт 1.1</li></ul>")

Новая разметка полностью затирает старую. Если же мы хотим просто добавить кусок разметки к старой, то мы просто можем присоединить новую разметку к старой:

var oldHtml = $('div.header').html();
$('div.header').html(oldHtml+"<p> Новый параграф</p>")

Также можно использовать функцию, которая пробегает по всем элементам выборки и в качестве параметров принимает текущий индекс элемента в выборке и его текущую разметку. С помощью функции мы можем переписать предыдущий пример следующим образом:

	$('div.header').html(function(index,oldValue){
		console.log("Старая разметка: " +oldValue);
		return oldValue+"<p> Новый параграф</p>";
	});

Работа с текстом элемента

Для работы с тексом используется метод text(), действие которого во многом похоже на действие метода html, только вместо разметки мы управляем текстом элемента:

• text(): получает текст первого элемента в наборе

• text('новый_текст'): устанавливает в качестве текста элемента строку, переданную в качестве параметра

• text(функция): установка текста с помощью функции

	var oldText = $('div.header').text();
	console.log(oldText);
	
	$('div.header').text("Название статьи");
	
	// использование функции
	$('div').first().text(function(index,oldValue){
		console.log("Старый текст: " +oldValue);
		return "Новый текст";
	});

Однако метод text следует использовать с осторожностью. Если элемент имеет внутреннюю разметку, то она полностью замещается новым текстовым содержимым. Поэтому в случае, если надо изменить текст без изменения разметки, то лучше применять другие методы.

Работа с элементами форм

Для получения значений элементов форм используется метод val(). По принципу действия он похож на методы html() и text(), только используется для установки значений компонентов форм.

• val(): получает значение первого элемента в наборе

• val('новое_значение'): устанавливает в качестве значения элемента строку, переданную в качестве параметра

• val(функция): установка значения с помощью функции

<input type="text" value="Введите значение" />
<script type="text/javascript">
$(function(){
	// получение значения текстового поля
	var oldValue = $('input[type="text"]').val();
	console.log(oldValue);
	
	$('input[type="text"]').first().val("Введите логин");
	
	// использование функции для установки значения
	$('input[type="text"]').first().val(function(index,oldValue){
		console.log("Старое значение: " +oldValue);
		return "Введите пароль";
	});
});
</script>