Jquery добавить в начало элемента

Метод: .prepend(content);

Задача 1:

– вставить в элементы li списка фразу Добавленный контент перед содержащимся в элементе контентом.

Решение:

Пояснение:

– Для решения задачи с помощью селектора $(‘li’) выберем все пункты списка. С помощью метода .prepend(‘ Добавленный контент’); в каждый пункт списка, в перед его содержимым, вставляем фразу Добавленный контент.

Результат:

При загрузке страницы, к которой подключен скрипт, в начало каждого пункта li списка будет добавлена фраза Добавленный контент.

Задача 2:

– вставить в элементы p, найденные на странице, html конструкцию Добавленный контент перед содержащимся в элементе контентом.

Решение:

Пояснение:

– Для решения задачи с помощью селектора $(‘p’) выберем все параграфы на странице. С помощью метода .prepend(‘ Добавленный контент ‘); в каждый параграф, перед его содержимым вставляем html конструкцию Добавленный контент .

Результат:

При загрузке страницы, к которой подключен скрипт, в начало каждого параграфа будет добавлена html конструкция Добавленный контент .

Содержание:

.prepend( content [, content ] ) Возвращает: jQuery

Описание: Функция добавляет содержимое в начало определенных элементов.

Добавлен в версии: 1.0 .prepend( content [, content ] )

Добавлен в версии: 1.4 .prepend( function )

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append() ).

Читайте также:  Супер ультра hd телевизоры

The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With .prepend() , the selector expression preceding the method is the container into which the content is inserted. With .prependTo() , on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

Работа с DOM

Работа с CSS

Добавление содержимого

Родители и потомки

Соседи

Разное

Работа с набором

Обход набора

Эффекты jQuery

Управление анимацией

Метод .append() добавляет текст в конец элемента. Также существует метод .appendTo(), который работает аналогичным образом (отличие в способе применения, см. примеры).

См. также псевдокласс after, который добавляет текст в конец элемента на CSS.

См. также урок основы работы с jQuery для более полного понимания.

Синтаксис

Вставка текста в конец элемента:

В методе appendTo просто меняется местами текст и селектор:

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

Текст также может быть не только обычным текстом, но и DOM элементом или объектом jQuery. В этом случае эти элементы переместятся со своей позиции в HTML коде.

Примеры

Пример

Давайте вставим текст в конец заданного абзаца:

Результат выполнения кода:

Пример

Давайте вставим текст с тегами в конец заданного абзаца:

Результат выполнения кода:

Пример

Решим предыдущую задачу с помощью метода .appendTo():

Результат выполнения кода:

Пример

Давайте найдем все абзацы и в конец каждому из них поставим его порядковый номер в наборе:

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

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

Adblock detector