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

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

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

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

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

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

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

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

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

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

alert($("div").eq(0).text());

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

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

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

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

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

&lt;b&gt;Новое значение&lt;/b&gt;
alert($("div").html());

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

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

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

$("div:first").html("<b>Новое значение</b>");
$("#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>"));
$("#div1").prepend("<u>Новый текст</u>");
<div id="div1">
<b>Текст</b>
</div>

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

<div id="div1"><u>Новый текст</u>
<b>Текст</b>
</div>
$("<u>Новый текст</u>").appendTo("#div1");

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

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

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

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

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

$("#div1").prepend("<u>Новый текст</u>");
Предыдущая статья Все статьи Следующая статья