.html() – возвращает или изменяет html-содержимое выбранных элементов страницы.

Функция имеет три варианта использования.

.html()

Возвращает html-содержимое выбранного элемента. Если таких элементов несколько, то значение будет взято у первого.

.html( htmlString )

• htmlString — html строка на которую будет заменено содержимое выбранных элементов.

.html( function )

• function (index, oldhtml) — заменяет содержимое выбранных элементов на возвращенное пользовательской функцией значение. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры:
  • index — позиция элемента в наборе;
  • oldhtml — текущее html-содержимое.

Внимание! Данный метод нельзя применять к XML документам.

Разберем подробно три варианта использования функции.

Получение html-содержимое выбранного элемента

Мы можем использовать метод .html() для получения содержимого элемента. Если под селектор попадут несколько элементов, то будет извлечён только первый. Предположим, что у нас есть следующий код:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

Напишем простую функцию:

$( "div.demo-container" ).html();

результатом её выполнения будет html-код:

<div class="demo-box">Demonstration Box</div>

Данный метод использует нативное свойство innerHTML. Некоторые браузеры могут возвратить результат не совсем в таком виде, в котором он присутствует на странице. К примеру, Internet Explorer иногда упускает кавычки у значений атрибутов.

Изменение html-содержимое выбранного элемента

Когда функция .html() используется для установки содержимого элемента, то любое его содержимое будет заменено на новое.

Вернемся к нашему html фрагменту:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

Изменим содержимое блока <div class=”demo-container”> :


$( "div.demo-container" )
  .html( "<p>All new content. <em>You bet!</em></p>" );

В итоге фрагмент будет выглядеть следующим образом:

<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

Начиная с jQuery 1.4, метод .html() позволяет формировать HTML контент элемента в отдельной функции. Пусть у нас есть документ с шестью параграфами. Заменим их содержимое с <div class=”demo-container”> на <p>All new content for <em>6 paragraphs!</em></p>:

$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

Замечание: важно отметить, что используя метод .html() вы получите содержимое только первого элемента из всех выбранных. Если вам нужны содержимое всех выбранных элементов, то следует использовать конструкции типа .map() или .each().