jquery получить html элемента

Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

• html – для чтения и изменения HTML содержимого элемента;
• text – для чтения и изменения текстового содержимого элемента;
• val – для чтения и изменения значения элементов формы.

Содержание

1. Чтение HTML контента элемента
2. Изменение HTML контента элемента
3. Получение текстового содержимого элемента
4. Замена контента элемента указанным текстом
5. Удаление контента элемента
6. Получение значения элемента формы
7. Установка значения элементу формы
8. version added: 1.0 .html()
9. version added: 1.0 .html( htmlString )
10. version added: 1.4 .html( function(index, oldhtml) )
11. Пример:
12. Примеры
13. Связанные уроки:
14. 15 особенностей jQuery 1.4
15. Доступ к элементам контента с помощью jQuery
16. Получение html-содержимое выбранного элемента

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .

Использование функции для замены HTML контента элемента:

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

Получение текстового содержимого элемента

В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

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

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .

Например, получим значение элемента input :

Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .

Если коллекции нет элементов, то метод val возвращает значение undefined .

Например, получим значение элемента textarea , имеющего имя description :

Получим значение элемента select :

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

Установка значения элементу формы

Изменение значения элемента формы в jQuery осуществляется с помощью метода val .

Например, при клике на кнопку установим элементу input её текст:

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

Например, поменяем значение элемента select :

Например, присвоим значения элементу select с множественным выбором ( multiple ):

Возвращает или изменяет html-содержимое выбранных элементов

version added: 1.0 .html()

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

version added: 1.0 .html( htmlString )

htmlString

Тип: строка html

HTML строка которую нужно вставить в элемент.

version added: 1.4 .html( function(index, oldhtml) )

function(index, oldhtml)

Заменяет html-содержимое каждого выбранного элемента в наборе на возвращенное функцией function значение. Функция вызывается, для каждого из выбранных элементов.

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

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

Данные будут извлечены из первого

Результат будет такой:

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

Пример:

Преобразуем html в текст, при клике по параграфу.

Метод .html() может использоваться так же для замещения содержимого элемента.

Возьмём следующий HTML фрагмент:

Данная строчка заменит содержимое элемента

Начиная с jQuery 1.4, метод .html() позволяет формировать HTML контент элемента в отдельной функции.

Дан документ с шестью параграфами. Заменим их содержимое с

All new content for 6 paragraphs!

Примеры

Пример: добавляем html каждому из div-ов

Пример: добавляем html каждому из

Связанные уроки:

15 особенностей jQuery 1.4

jQuery постоянно развивается. Релиз версии 1.4 состоялся в январе. jQuery 1.4 получила много новых функций, расширений и имеет значительно лучшую производительность. Данная статья посвящена описанию основных улучшений jQuery 1.4.

Доступ к элементам контента с помощью jQuery

jQuery даёт возможность работать с элементами HTML и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов.

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

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

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

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

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

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

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

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

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

Источник: computermaker.info