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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оставить комментарий

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