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() ).

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():

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

Пример

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

Оцените статью
Все о Windows 10
Добавить комментарий

Adblock
detector