Метод html
Метод html
позволяет изменять текст
элемента и получать его вместе с тегами.
Синтаксис
Получение текста:
$(селектор).html();
Изменение текста:
$(селектор).html(новый текст);
Дополнительно
Метод html
может применить заданную
функцию к каждому элементу в наборе.
При этом первым параметром функция получит
номер элемента в наборе, а вторым параметром
- текущий текст элемента:
$(селектор).html(function(номер в наборе, текущий текст элемента));
Имена переменных в функции могут быть любыми.
К примеру, если для первого параметра мы дадим имя
index
- тогда внутри нашей функции будет доступна
переменная index
, в которой будет лежать номер в
наборе для того элемента, который функция обрабатывает
в данный момент времени.Аналогично, если для второго
параметра дать, к примеру, имя value
- тогда
внутри нашей функции будет доступна переменная value
,
в которой будет лежать текст того элемента, который функция
обрабатывает в данный момент времени:
$(селектор).html(function(index, value) {
// тут доступны переменные index и value
});
Текст каждого элемента поменяется на тот, который вернет функция конкретно для этого элемента.
Пример
Давайте выведем на экран содержимое нашего абзаца:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Пример
Давайте поменяем содержимое нашего абзаца:
<p id="test">text1</p>
$('#test').html('text2');
HTML код станет выглядеть так:
<p id="test">text2</p>
Пример
Давайте поменяем содержимое нашего абзаца на текст с тегами:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
HTML код станет выглядеть так:
<p id="test"><span>text2</span></p>
Пример
Давайте каждому абзацу добавим в конце его порядковый номер в наборе:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML код станет выглядеть так:
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>