jQuery. Как получить содержимое тэга или элемента на странице.
Бывают ситуации, что нужно получить внутреннее содержимое элемента (тэга) на странице.
Нужно во всплывающем окне вывести информацию, которая написана внутри элемента div с >
Как это можно сделать?
Здесь есть 2 варианта.
1 вариант. Вам нужно получить html-код, который находится внутри элемента.
В этом случае нужно воспользоваться методом html().
селектор.html();
В исходный пример нужно внести совсем небольшие изменения:
Окно с таким содержимым мы получим в результате.
Обратите внимание, что все тэги, которые были внутри элемента, тоже будут выведены.
2 вариант. Вам нужно получить только текстовое содержимое.
Для этого нужно внести очень небольшое изменение в скрипт: вместо метода html() воспользоваться методом text().
селектор.text();Вот, как это будет выглядеть:
В результате, в окне будет выведен только текст и все теги будут проигнорированы:
Хочу сказать, что на практике пользоваться такими методами приходится очень часто, поэтому имейте их в виду и применяйте по месту.
Все мои уроки по Javascript здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Содержимое элементов
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
До сих пор мы занимались поиском атрибутов элементов, но в jQuery предусмотрены средства, позволяющие работать также с содержимым элементов. Доступные для этого методы приведены в таблице ниже:
Методы для работы с содержимым элементов
Метод Описание text() Получает объединенное текстовое содержимое всех элементов, содержащихся в объекте jQuery, и их потомков text(значение) Устанавливает текстовое содержимое для всех элементов, содержащихся В объекте jQuery html() Возвращает HTML-содержимое первого из элементов, содержащихся в объекте jQuery html(значение) Устанавливает HTML-содержимое для всех элементов, содержащихся в объекте jQuery text(функция), html(функция) Устанавливает текстовое и HTML-содержимое с помощью функции С методом text() связана одна особенность: если он вызывается без аргументов, то возвращаемый им результат генерируется на основе содержимого всех выбранных элементов. В отличие от этого поведение метода html() согласуется с поведением остальных методов jQuery, и он возвращает лишь содержимое первого элемента выбранного набора, как показано в примере ниже:
$(function() < var html = $('div.dcell').html(); console.log(html); >);В этом сценарии метод html() используется для считывания HTML-содержимого первого из элементов, соответствующих селектору div.dcell, и вывода на консоль результата, который представлен ниже. Обратите внимание на то, что HTML-дескрипторы самого элемента в возвращаемый результат не включаются:
Изменение содержимого элементов
Для изменения содержимого элементов используются методы html() и text(). В нашем примере документа для цветочного интернет-магазина сколько-нибудь значимое текстовое содержимое элементов отсутствует, поэтому в примере ниже показано лишь применение метода html() для этой цели:
$(function() < $('#row2 div.dcell').html($('div.dcell').html()); >);Этот сценарий изменяет HTML-содержимое тех принадлежащих классу dcell элементов div, которые являются потомками элемента row2. Для получения содержимого, подлежащего вставке, используется метод html(), который считывает HTML-содержимое из первого элемента div.dcell. Это приводит к тому, что каждое из изображений в нижнем ряду элементов заменяется изображением астры, как показано на рисунке:
Изменение содержимого элементов с помощью функции
Как и в случае многих других методов, передача методам html() и text() функции в качестве аргумента обеспечивает возможность динамического изменения содержимого элементов. В обоих случаях аргументами функции являются позиция элемента в объекте jQuery и текущее текстовое или HTML-содержимое. Переменная this ссылается на объект HTMLElement соответствующий элементу, а возвращаемое значение функции содержит требуемый результат.
Пример использования функции совместно с методом text() приведен ниже:
$(function() < $('label').css("border", "thick solid red").text(function(index, currentValue) < return "Индекс " + index; >); >);В этом сценарии текстовое содержимое элементов label изменяется в зависимости от значения аргумента index, указывающего позицию элемента в выбранном наборе (для заключения изменяемых элементов в рамку используется метод css()). Результат представлен на рисунке:
Работа с HTML, текстом и атрибутом value в jQuery
В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:
- html – для чтения и изменения HTML содержимого элемента;
- text – для чтения и изменения текстового содержимого элемента;
- val – для чтения и изменения значения элементов формы.
Чтение HTML контента элемента
Например, получим HTML содержимое элемента с идентификатором ( id ) contact :
// сохраним HTML контент элемента в переменную contactHTML var contactHTML = $('#contact').html();Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:
Содержимое 1.
Содержимое 2.
.Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):
$('p').each(function(){ // выведем содержимое текущего элемента в консоль console.log($(this).html()); });Изменение HTML контента элемента
Например, заменим содержимое элемента ul :
- молоко 1 литр
- яйца 2 шт.
- мука 270 гр.
Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.
Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .
Использование функции для замены HTML контента элемента:
Название 1.
Название 2.
Название 3.
.Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):
Получение текстового содержимого элемента
В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.
Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:
Этот параграф содержит ссылку.
.Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).
Замена контента элемента указанным текстом
Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.
После выполнения, элемент div с классом info будет иметь следующий HTML код:
На экране данный элемент будет выглядеть так:
Другой контент.
Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:
Контент 1 .
Контент 2 .
Контент 3 .
.Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):
Некоторое содержимое.
Ещё некоторый контент.
.Удаление контента элемента
В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.
Например, удалим содержимое всех элементов с классом vote :
Получение значения элемента формы
В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .
Например, получим значение элемента input :
.Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.
Белый
Зелёный
Коричневый
.Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .
// получить значение выбранной опции select $('select.color option:checked').val(); // получить значение выбранного select $('select.size').val(); // получить значение отмеченного (checked) checkbox $('input[type="checkbox"][name="answers"]:checked').val(); // получить значение установленной радиокнопки $('input[type="radio"][name="rating"]:checked').val();Если коллекции нет элементов, то метод val возвращает значение undefined .
Например, получим значение элемента textarea , имеющего имя description :
var valDescription = $('textarea[name="description"]').val(); if (valDescription !== undefined) { console.log('Значение элемента textarea: ' + valDescription); } else { console.log('Элемент textarea с именем description на странице не найден!'); }Получим значение элемента select :
.Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).
Установка значения элементу формы
Изменение значения элемента формы в jQuery осуществляется с помощью метода val .
Например, при клике на кнопку установим элементу input её текст:
Данный метод устанавливает значение для всех элементов набора, к которому он применяется.
Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:
.Например, поменяем значение элемента select :
Например, присвоим значения элементу select с множественным выбором ( multiple ):
.Изменим, значение checkbox :
Вы знаете английский .Как получить содержимое тега ??
вообщем не помогло. проблема осталась. Если есть value по умолчанию, оно выводит только его. То что я ввожу в инпут, а после нажимаю кнопку, то выводит value по умолчанию или вообще ничего, если value по умолчанию нету.
Оно просто обязано работать. Вот Сергей Мельников в другом ответе дал ссылку на почти такой же пример кода, который отрабатывает как положено. Возможно, у вас на странице мешают какие-то другие скрипты или какие-нибудь опечатки есть. Может быть вы покажете весь код полностью?
