Jquery как вывести содержимое div

Работа с HTML, текстом и атрибутом value в jQuery

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

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

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

Чтение 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 ):

Источник

jQuery. Как получить содержимое тэга или элемента на странице.

Бывают ситуации, что нужно получить внутреннее содержимое элемента (тэга) на странице.

Нужно во всплывающем окне вывести информацию, которая написана внутри элемента div с .

Как это можно сделать?

Здесь есть 2 варианта.

1 вариант. Вам нужно получить html-код, который находится внутри элемента.

В этом случае нужно воспользоваться методом html().

В исходный пример нужно внести совсем небольшие изменения:

Окно с таким содержимым мы получим в результате.

Обратите внимание, что все тэги, которые были внутри элемента, тоже будут выведены.

2 вариант. Вам нужно получить только текстовое содержимое.

Для этого нужно внести очень небольшое изменение в скрипт: вместо метода html() воспользоваться методом text().

Вот, как это будет выглядеть:

В результате, в окне будет выведен только текст и все теги будут проигнорированы:

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

Все мои уроки по Javascript здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

Источник

Jquery как вывести содержимое div

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

version added: 1.0 .text()

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

version added: 1.0 .text( textString )

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

version added: 1.4 .text( function(index, text) )

Заменяет содержимое каждого выбранного элемента в наборе на возвращенное функцией function текст. Функция вызывается, для каждого из выбранных элементов. Параметры функции:
index — позиция элемента в наборе,
value — текущей текст элемента.

Пример 1. Получим текстовое-содержимое элемента div:

HTML:
JS:

Пример 2. Заменим содержимое элемента div на введенный текст:

HTML:
JS:

Обратите внимание, что метод .text( textString ) преобразует htm-теги в их сущности, аналогично функции htmpspecialchars в php. Для проверки в примере выше попробуйте вставить какой-либо html-код.

Пример 3. Заменим HTML-содержимое элементов div c помощью функции, которая вернет первые 20 символов начального текста, полученный текст обернем в параграф, полученная строка вернется и заменит собой исходную:

HTML:
JS:

Источник

Jquery как вывести содержимое div

Возвращает или изменяет 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 и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов.

Источник

Удаление, замена и перемещение элементов в jQuery

В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:

• Удаление элементов со страницы с помощью методов empty() , remove() , detach() и unwrap()
• Замена элементов новыми элементами с помощью методов replaceWith() и replaceAll()
• Перемещение элементов от одного родительского элемента к другому на странице

Удаление элементов со страницы

Удаление всего, что находится внутри элемента: empty()

Метод empty() — это простейший способ удаления содержимого со страницы. Вызов метода empty() для объекта jQuery удаляет все содержимое из набора, соответствующего элементу (или элементам) в объекте jQuery.

Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.

В примере удаляется содержимое из двух элементов div :

После выполнения выше приведённого кода содержимое страницы изменится на :

Удаление элемента целиком: remove()

Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:

после выполнения выше приведённого кода оба элемента div будут удалены со страницы:

Вы можете передать строку с условным селектором в метод remove() . В этом случае, удаляемые элементы будут фильтроваться селектором. Например:

В выше приведённом примере будет удалён только элемент div , для которого установлен класс removeMe и содержащий текст «Другой параграф». Все остальное останется на странице:

Удаление элемента без разрушения его данных: detach()

Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..

Однако, для того, чтобы сохранить ресурсы и избежать потенциальной проблемы с утечкой памяти, метод remove() удаляет все данные jQuery и события, ассоциированные с удалённым элементом. Например, если элементу было назначено событие jQuery click , а затем элемент был удалён со страницы с помощью метода remove() , то событие click будет удалено из элемента. Это может вызвать проблему, если позже захотите вернуть элемент обратно на страницу и восстановить его функциональность.

В данном случае может помочь метод detach() (появился в jQuery 1.4). Он действует почти также как и метод remove() , за исключением одного — он не удаляет данные jQuery и события, ассоциированные с удалённым элементом. Это означает, что позже вы можете присоединить удалённые элементы обратно с сохранением их метаданных jQuery.

Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS «red» для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.

Затем скрипт удаляет первый параграф со страницы с использованием метода remove() и сохраняет объект jQuery , который содержал параграф в переменной myDiv1Para . Затем повторно присоединяем параграф к родительскому div с помощью метода appendTo() .

Тоже самое мы проделываем со вторым параграфом, только используем метод detach() вместо метода remove() .

После выполнения данного скрипта первый параграф потеряет обработчик события click , а второй параграф сохранит свою функциональность полностью. Вы можете проверить, открыв страницу в браузере. Если нажать кнопку мыши на втором параграфе, то он будет менять цвет, а первый никак не будет реагировать на действия мыши.

Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.

Далее мы рассмотрим ещё несколько способов переместить элемент.

Удаление родительского элемента: unwrap()

Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

Следующий пример разворачивает содержание div . Другим словами происходит замещение div его содержимым:

После выполнения выше приведённого кода, содержание страницы примет следующий вид:

Замена элементов

Замена элемента новым содержимым: replaceWith()

Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:

• Объект элемента, который создан с помощью функции JavaScript DOM, такой как document.getElementById() или document.createElement()
• Строка HTML, представляющая замещающий контент
• Объект jQuery, содержащей элемент (или элементы), который будет использоваться для замещения
• Возвратная функция, которая должна возвращать замещающий HTML код

Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:

После выполнения кода содержимое страницы примет вид :

replaceAll() : альтернатива методу replaceWith()

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

Например, следующие 2 строки кода делают одно и тоже:

Перемещение элементов

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву DOM? Например, есть параграф внутри элемента div , и нужно его переместить в другой div .

Несмотря на то, что в jQuery нет специального метода для перемещения элементов по дереву DOM, в действительности это очень просто реализовать. Все, что нужно сделать, это выделить элемент(ы), которые вы хотите переместить; затем вызвать метод «добавления» , например, append() , appendTo() или prepend() , чтобы добавить выделенный элемент к другому родительскому элементу. jQuery автоматически распознает, что элемент(ы) уже существует на странице и переместит его к новому родителю.

Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:

После выполнения кода страница примет следующий вид:

А здесь другой способ перемещения элемента:

З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.

Так в выше приведённом примере объект jQuery возвращается методом detach() , который вызывается для удаления параграфа. А метод prependTo() вызывается для возвращённого объекта jQuery, чтобы добавить удалённый параграф к новому родительскому элементу.

Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

После выполнения выше описанного кода, содержимое страницы будет выглядеть так:

Резюме

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-removing-replacing-moving-elements/
Перевел: Сергей Фастунов
Урок создан: 11 Августа 2010
Просмотров: 303072
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник