Манипуляции с элементами

Получать коллекцию элементов и осуществлять доступ к отдельному элементу мы уже научились. Теперь рассмотрим различные методы, позволяющие изменять свойства и значения элементов коллекции. Некоторые методы мы уже использовали в наших примерах для вывода результата или изменения свойств элементов.

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

Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором div1 можно воспользоваться следующим кодом.

document.getElementById("div1").innerHTML = "Новый текст";

Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $(), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.

$("#div1")[0].innerHTML = "Новый текст";

Для этой цели можно также воспользоваться методом get().

$("#div1").get(0).innerHTML = "Новый текст";

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

  • text([<Значение>]) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq().
alert($("div").eq(0).text());

Можно также ограничить набор с помощью селектора :first.

alert($("div:first").text());

При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены HTML-эквивалентами.

$("div").text("<b>Новое значение</b>");

В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.

&lt;b&gt;Новое значение&lt;/b&gt;
  • html([<Значение>]) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.
alert($("div").html());

При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах <div>.

$("div").text("<b>Новое значение</b>");

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

$("div:first").html("<b>Новое значение</b>");
  • append(<Выражение>) — добавляет <Выражение> в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.
$("#div1").append("<u>Новый текст</u>");
<div id="div1">
<b>Текст</b>
</div>

Результат будет выглядеть следующим образом.

<div id="div1">
<b>Текст</b>
<u>Новый текст</u></div>

Теперь добавим DOM-элемент.

$("#div1").append($("<u>Новый текст</u>").get(0));

А теперь добавим созданный элемент коллекции jQuery.

$("#div1").append($("<u>Новый текст</u>"));
  • prepend(<Выражение>) — добавляет <Выражение> в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append(), за исключением того, что добавляет <Выражение> не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.
$("#div1").prepend("<u>Новый текст</u>");
<div id="div1">
<b>Текст</b>
</div>

Результат будет выглядеть следующим образом.

<div id="div1"><u>Новый текст</u>
<b>Текст</b>
</div>
  • appendTo(<Селектор>) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором div1.
$("<u>Новый текст</u>").appendTo("#div1");

Результат будет таким же, как и при использовании метода append().

$("#div1").append("<u>Новый текст</u>");

Как видно из примера, мы поменяли параметры местами и использовали метод append() вместо метода appendTo().

  • prependTo(<Селектор>) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором div1.
$("<u>Новый текст</u>").prependTo("#div1");

Результат будет таким же, как и при использовании метода prepend().

$("#div1").prepend("<u>Новый текст</u>");

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе