Работа с html-содержимым элемента в jQuery

.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().

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *