Метод html

Метод .html() позволяет изменить текст элемента и получить его текст вместе с тегами.

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

См. также урок основы работы с jQuery для более полного понимания.

См. также JavaScript свойство innerHTML, с помощью которого можно сменить текст элемента на чистом JavaScript.

Синтаксис

Получение текста:

$(селектор).html()

Изменение текста:

$(селектор).html(новый текст)

Дополнительно

Начиная с jQuery1.4 метод html может применить заданную функцию к каждому элементу в наборе.

При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущий текст элемента:

$(селектор).html(function(номер в наборе, текущий текст элемента))

Имена переменных в функции могут быть любыми.

К примеру, если для первого параметра 'номер в наборе' мы дадим имя index - тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.

Аналогично, если для второго параметра 'текущий текст элемента' дать, к примеру, имя value - тогда внутри нашей функции будет доступна переменная value, в которой будет лежать текст того элемента, который функция обрабатывает в данный момент времени:

$(селектор).html(function(index, value){
	//тут доступны переменные index и value
})

Текст каждого элемента поменяется на тот, который вернет функция конкретно для этого элемента.

Примеры

Пример

Давайте выведем на экран содержимое нашего абзаца:

<p id="test">привет</p>

var text = $('#test').html();
document.write(text);

Пример

Давайте поменяем содержимое нашего абзаца:

<p id="test">привет</p>

$('#test').html('пока')

<p id="test">пока</p>

Пример

Давайте поменяем содержимое нашего абзаца на текст с тегами:

<p id="test">привет</p>

$('#test').html('<span>пока</span>')

<p id="test"><span>пока</span></p>

Пример

Давайте каждому абзацу добавим в конце его порядковый номер в наборе:

<p>первый абзац</p>
<p>второй абзац</p>
<p>третий абзац</p>

$('p').html(function(index, value){
	return value+' '+index;
});

<p>первый абзац 1</p>
<p>второй абзац 2</p>
<p>третий абзац 3</p>