Методы изменения содержимого элементов

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


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

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

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

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

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

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

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

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

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

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

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

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

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

<b>Новое значение</b>

• html ( [<3начение>] ) — позволяет получить или задать 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  id="div1">
<b>Текст</b>
<u>Новый Текст</ux/div>

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

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

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

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

• prepend(<Выражение>) — добавляет <Выражение> в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет <Выражение> не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

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

<div id="div1">
<b>Текст</b>

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

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

•    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>");

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *