Метод .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('пока')
HTML код станет выглядеть так:
<p id="test">пока</p>
Пример
Давайте поменяем содержимое нашего абзаца на текст с тегами:
<p id="test">привет</p>
$('#test').html('<span>пока</span>')
HTML код станет выглядеть так:
<p id="test"><span>пока</span></p>
Пример
Давайте каждому абзацу добавим в конце его порядковый номер в наборе:
<p>первый абзац</p>
<p>второй абзац</p>
<p>третий абзац</p>
$('p').html(function(index, value){
return value+' '+index;
});
HTML код станет выглядеть так:
<p>первый абзац 1</p>
<p>второй абзац 2</p>
<p>третий абзац 3</p>