Jquery изменить html код элемента

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

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

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

перемещает элементы страницы elements внутрь выбранных элементов (их прежнее содержимое будет при этом удалено). elements можно задать DOM-элементом или объектом jQuery. Данная форма использования метода html является недокументированной (спасибо zandroid за подсказку)

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

$(«.topBlock»)()	вернет html-содержимое первого элемента с классом topBlock.
$(«.topBlock»)(« Новье! «)	изменит содержимое всех элементов с классом topBlock на параграф с текстом «Новье!».

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

В действии

найдем контейнер, содержащий красный элемент и добавим в него еще и зеленый:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ .container < height: 60px; width: 200px; border: 2px solid #eedddd; margin:15px; >.box < float: left; height: 40px; width: 40px; margin: 5px; padding: 5px; font-size:20pt; background-color: #eee; >.red < background-color: #ccaaaa; >.green < background-color: #aaccaa; >~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div ~gt~ ~lt~div ~gt~ 1 ~lt~/div~gt~ ~lt~div ~gt~ 2 ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div ~gt~ ~lt~div ~gt~ 3 ~lt~/div~gt~ ~lt~div ~gt~ 4 ~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $(".container")(function(indx, oldHtml)< if($(oldHtml).hasClass("red")) return oldHtml + '~lt~div ~gt~ 2.5 ~lt~/div~gt~'; else return oldHtml; >); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

• html-содержимое элементов
• получить html-содержимое элементов
• изменить html-содержимое элементов
• установить html-содержимое элементов
• ()
• html()

Источник

Работа с 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 :

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

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

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

Название 1.
 
Название 2.
 
Название 3.
 .  

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

75
 
37
 
64
 
17
 
53
 .  

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

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

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

 Получить текстовый контент элемента 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 :

 16Gb 32Gb  .  

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

 Acer Samsung Asus   

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

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

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

 
Кнопка 1 Кнопка 2 Кнопка 3 
 .  

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

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

 .  

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

 Красный Зелёный Синий   

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

 Английский Французский Испанский Китайский  .  

Изменим, значение checkbox :

 Вы знаете английский .  

Источник

Jquery изменить html код элемента

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

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

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

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

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

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

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

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

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

Источник