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

→
↑