АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
1 of 119 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Метод 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>

Смотрите также

  • метод text,
    который позволяет получить текст элемента без тегов
  • JavaScript свойство innerHTML,
    с помощью которого можно сменить текст элемента на чистом JavaScript
  • JavaScript свойство outerHTML,
    с помощью которого можно изменить текст элемента вместе с его тегом на чистом JavaScript
enru