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

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

Источник

DOM — Изменение HTML

HTML DOM позволяет JavaScript изменять содержимое HTML элементов.

Изменение потока вывода HTML

JavaScript может создавать динамический HTML контент.

В JavaScript можно использовать метод document.write() для прямой записи в поток вывода HTML:

Внимание! Никогда не используйте метод document.write() после полной загрузки документа. Он перезапишет содержимое всего документа.

Изменение содержимого HTML элемента

Самый простой способ изменить содержимое HTML элемента — это воспользоваться свойством innerHTML.

document.getElementById(id).innerHTML = новый HTML код

В следующем примере изменяется содержимое элемента :

   
Привет всем!
    

• Приведенный в примере HTML документ содержит элемент с атрибутом id=»p1″
• Мы используем HTML DOM, чтобы получить доступ к элементу с id=»p1″
• JavaScript изменяет содержимое (innerHTML) элемента на строку «Новый текст!»

    
Старый заголовок
    

Здесь могла быть ваша реклама.

let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';