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

Урок №16 — Добавление элементов

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

Видеоурок

jQuery позволяет встраивать различные элементы прямиком в HTML-структуру сайта. Для этого в библиотеке предусмотрено несколько методов, которые делают примерно схожие функции, но с небольшими отличиями.

Методы append() и appendTo() позволяют поместить объект в конец другого объекта. Разница между ними лишь в синтаксисе:

• append() принимает параметр со значением, которое необходимо поместить в блок;
• appendTo() принимает параметр с информацией куда необходимо поместить значение.

Также существует метод .prepend() . Метод действует также как «append», но помещает объект в начало другого объекта.

Если вы хотите обернуть объект в какой-либо тег, то для этого стоит использовать метод wrap() .

Если вы хотите поместить объект после или до другого объекта, то необходимо использовать функции insertAfter() или же insertBefore() .

// Поместить после блока с текст").insertAfter("#block"); // Поместить текст перед последним тегом div $("Просто еще текст").insertBefore("div").last();

Весь код будет доступен после подписки на проект!

Создание, добавление и удаление элементов в jQuery

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

Как создать элемент в jQuery?

Создание элементов в jQuery осуществляется посредством передачи HTML-строки в главную функцию этой библиотеки.

Синтаксис создания элементов из HTML-строки:

jQuery( html [, ownerDocument ] )

Он имеет 2 параметра. Первый ( html ) обязательный. Здесь указывается HTML-строка, на основе которой нужно создать соответствующие элементы. Второй ( ownerDocument ) не обязательный. Он необходим для указания документа, в котором необходимо создать элементы. По умолчанию элементы создаются в том же документе, в который была загружена библиотека jQuery. Если вы хотите внедрить элементы в другой документ, то его явно необходимо указать с помощью этого параметра.

Пример создания элемента из HTML-строки:

$('
Новый текст сообщения.
')

Пример создания элемента не в документе, в который была загружена библиотека jQuery, а в другой #include :

$('
Новый элемент
', $('#include').prop('contentWindow').document)

Пример создания нескольких элементов из HTML-строки:

$('
' + '' + '' + '
')

Созданный элемент не отобразиться на странице, так как мы его только создали. Для того чтобы элемент отобразился на странице его нужно вставить в неё. Как это выполнить рассмотрим ниже.

Этот способ создания элементов можно использовать только в том случае, если вы полностью доверяете источнику. Если же вы не уверены в источнике, из которого берёте HTML данные, то обязательно применяйте поэлементный способ создания нужного фрагмента.

Синтаксис создания HTML элемента:

jQuery( html[, attributes] )

Он имеет 2 параметра. Первый параметр ( html ) является обязательным. В нём указывается строка, описывающая HTML элемент, который необходимо создать. Например, для создания элемента div , она описывается как «» или как » » . Второй параметр ( attributes ) является дополнительным. В нём задаются в формате объекта атрибуты, обработчики событий и методы которые нужно добавить или связать с только что созданным элементом.

Cоздадим элемент используя синтаксис jQuery для создания HTML элемента:

$('
Новый текст сообщения.
') // поэлементное создание HTML-кода представленного строчкой выше $('
', { 'class': 'alert-message', text: 'Новый текст сообщения.' })

Cоздадим HTML фрагмент, используя поэлементый способ создания:

$('
' + '' + '' + '
') // поэлементное создание HTML-кода представленного строчками выше $('
') .append('', { src: 'cat_in_hat.png', alt: 'Кот в шляпе' }) .append('

С методом append познакомимся ниже. Он в этом коде используется, для того чтобы добавить элементы img и figcaption в элемент figure .

Как вставить элементы на страницу

В jQuery все методы для добавления элементов на страницу можно разбить на три большие группы.

Первая группа – это методы, предназначенные для вставки новых элементов внутрь других. К ним относится append, appendTo, prepend, prependTo, html и text.

Метод append

Метод append предназначен для вставки контента в конец каждого элемента набора, к которому он применяется.

Синтаксис метода append (2 варианта):

.append( content [, content ] ) // 1 вариант .append( function ) // 2 вариант

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

Метод append (1 вариант) может принимать на вход не один, а любое количество аргументов content . Используется это когда вам нужно вставить не один, а несколько элементов.

Вторая реализация метода append позволяет принимать в качестве аргумента функцию.

Function( Integer index, String html ) => htmlString или Element или Text или jQuery

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

Пример, в котором с помощью метода append будем добавлять в конец элемента .info новый элемент div , содежащий текущее время:

 Добавить текст   

Метод appendTo

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

// target - цель // contentToBeAppeded - контент, который нужно вставить $(target).append(contentToBeInserted) $(contentToBeInserted).appendTo(target)

Синтаксис метода appendTo:

.appendTo( target )

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

Пример, в котором рассмотрим как с помощью метода append можно добавить элемент внутрь каждого элемента li :

• .
• .

Методы prepend и prependTo

Методы prepend и prependTo полностью аналогичны методам append и appendTo . Но, в отличие от них они вставляют новые элементы не в конец других элементов, а в их начало (т.е. перед всеми элементами расположенными в каждом из них).

Синтаксис метода prepend (2 варианта):

.prepend( content [, content ] ) // 1 вариант .prepend( function ) // 2 вариант

Синтаксис метода prependTo :

.prependTo( target )

Пример, в котором добавим текст «Внимание!» перед содержимым элемента .message :

 
Текст сообщения.
  

Методы text и html

Методы text и html подробно описаны в этой статье. Они применяются, когда нужно установить новое содержимое для каждого элемента текущего набора. Метод text используется, когда требуется установить текстовый контент, а html – когда HTML фрагмент. Кроме этого, данные методы применяются также для получения содержимого элементов.

Вторая группа – это методы, предназначенные для вставки новых элементов за пределами существующих элементов, т.е. перед или после них. К ним относятся after, insertAfter, before и insertBefore.

Метод after

Метод after применяется, когда вам нужно вставить некоторый контент после каждого элемента текущего набора.

Синтаксис метода after (2 варианта):

.after( content [, content ] ) // 1 вариант .after( function ) // 2 вариант

Назначение параметров и данные, которые они могут принимать такие же, как у метода append. Перейти к описанию параметров метода append .

Пример, в котором добавим кнопку «Закрыть» после текста сообщения (элемента .message__text ):

 
Текст сообщения.
 
 

Метод insertAfter

Метод insertAfter выполняет ту же функцию, что и метод after . Их основное отличие заключается в том, что контент (что нужно вставить) и цель (куда нужно вставить) размещены наоборот. Т.е. в after цель располагается перед ним, а контент передаётся как аргумент этого метода (в круглых скобках). В insertAfter цель задаётся как аргумент этого метода (в круглых скобках), а контент указывается перед ним.

// target - цель // contentToBeInserted - контент, который нужно вставить $(target).after(contentToBeInserted) $(contentToBeInserted).insertAfter(target)

Синтаксис метода insertAfter :

.insertAfter( target )

Пример, в котором вставим после каждого элемента p элемент div с текстовым контентом «Это новый элемент»:

.
 
.
 

Методы before и insertBefore

Методы before и insertBefore полностью аналогичны методам after и insertAfter . Но, в отличие от них они вставляют новые элементы не после цели, а перед ней.

Пример, в котором добавим перед всеми элементами p элемент div с текстовым содержимым «Это новый элемент»:

.
 
.
 

Третью группу представляют методы, которые могут применяться, когда вам нужно вставить новый контент таким образом, чтобы он был обернут относительно существующих. К этой группе относятся методы wrap, wrapAll и wrapInner.

Метод wrap

Метод wrap используется, когда вам нужно указанную HTML-структуру обернуть вокруг каждого элемента текущего набора.

Синтаксис метода wrap :

.wrap( wrappingElement ) // 1 вариант .wrap( function ) // 2 вариант

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

Во втором варианте реализации метода wrap в качестве аргумента может использоваться функция.

Function( Integer index ) => String или jQuery

Функция должна возвращать в качестве результата HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, которая будет обарачиваться вокруг каждого элемента текущего набора. В качестве аргумента функция получает индекс элемента в наборе. Внутри функции this указавает на текущий элемент в наборе.

Обернём каждый элемент p в текущем наборе вокруг двух элементов div :

.
 
.
 

Метод wrapAll

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

Данный метод не оборачивает каждый элемент набора, поэтому его имеет смысл использовать, когда все элементы набора имеют одного родителя или, другими словами, являются по отношению друг к другу соседями.

HTML-структура может иметь несколько уровней в глубину, но внутренний элемент в ней должен быть только один.

.wrapAll( wrappingElement ) // 1 вариант .wrapAll( function ) // 2 вариант

Параметр wrappingElement может принимать в качестве значения селектор, HTML-строку, DOM-элемент или объект jQuery. Данный параметр задаёт HTML-структуру, которая будет использоваться для оборачивания всех выбранных элементов.

Во втором варианте реализации метода wrapAll в качестве аргумента можно использовать функцию обратного вызова.

Function() => String or jQuery

Данная функция в качестве результата должна возвращать HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, с помощью которой будут обёрнуты чтобы все текущие элементы. Внутри функции this указывает на первый элемент набора.

Обернём все элементы p вокруг HTML конструкции, состоящей из двух элементов div вложенных друг в друга:

.
 
.
 
.
 

Метод wrapInner

Метод wrapInner применяется, когда нужно обернуть содержимое каждого элемента набора в заданную HTML-структуру.

.wrapInner( wrappingElement ) .wrapInner( function )

Параметр wrappingElement в этом методе принимает такие же значения как у метода wrap . Тоже касается, когда мы используем в качестве аргумента функцию.

Пример, в котором обернём содержимое каждого элемента li вокруг DOM-элемента b .

• unwrap
• wrap
• wrapAll
• wrapInner

Как скопировать элемент в jQuery

Копирование одного или нескольких элементов в jQuery осуществляется с помощью метода clone .

Синтаксис метода clone :

.clone ([withDataAndEvents] [, deepWithDataAndEvents])

Параметры withDataAndEvents и deepWithDataAndEvents являются необязательными. По умолчанию первый параметр равен false , а второй равен значению первого.

Первый параметр withDataAndEvents указывает, следует ли копировать обработчики событий и данные вместе с элементами.

Второй параметр делает аналогичные действия, но не для самого клонированного элемента, а для всех его дочерних элементов.

Примеры использования метода clone.

1. При нажатии на элемент будем его клонировать, после чего вставлять скопированный элемент в конец.

 
1
 
  

Немного усовершенствуем скрипт. Укажем, что при клонировании элемента нужно копировать и его события. Для этого установим параметру withDataAndEvents значение true .

JavaScript

clone = $(this).clone(true), // копируем элемент на который мы кликнули

2. Пример, в котором будем копировать элемент, включающий другие элементы. При этом на один из них «повешен» обработчик события.

 
 Товар: Добавить ещё товар  
  

Как заменить элемент в jQuery?

Замена каждого из выбранных элементов на другой в jQuery осуществляется с помощью метода replaceAll .

Синтаксис метода replaceAll :

.replaceAll( target )

Под параметром target понимается цель, т.е. те элементы которые нужно заменить. Указать на эти элементы можно посредством селектора, jQuery, массива или DOM-элемента.

При замене элементов метод replaceAll удаляет data и обработчики событий, связанные с удаляемыми узлами.

Например, заменим все элементы a на странице на элемент span с текстом «здесь была ссылка».

JavaScript

$('здесь была ссылка').replaceAll('a');

Ещё в jQuery есть метод replaceWith .

Данный метод работает наоборот. Здесь мы сначала выбираем элементы, которые хотим заменить, а затем в круглых скобках метода replaceWith указываем то, на что их хотим заменить.

Синтаксис метода replaceWith :

.replaceWith( newContent или function )

В качестве параметра этому методу можно передать новый контент в виде html-строки, DOM-элемента, массива или jQuery, а также определить его посредством функции.

Пример. При нажатии на кнопку button заменим её на элемент span с текстом, который был у кнопки.

Кнопка  

Как удалить элемент в jQuery?

В jQuery имеется несколько методов для удаления элементов из DOM.

Первый метод – это detach .

Данный метод позволяет удалить все или часть элементов из выбранного набора.

Синтаксис метода detach :

.detach( [selector ] )

Параметр selector является не обязательным. Он используется для указания селектора, в соответствии с которым будут удаляться только те элементы из набора, которые ему соответствуют.

Например, удалим все элементы с классом info на странице:

$('.info').detach();

Метод detach при удалении элементов не удаляет связанные с ними данные jQuery и обработчики событий. Таким образом при восстановлении элементов, удалённых с помощью метода detach , они будут связаны со всеми своими данными jQuery и обработчиками событий.

Рассмотрим это на примере:

 
Кнопка, удалять которую будем с помощью метода detach:
 Нажмите для удаления 
 
Кнопка, удалять которую будем с помощью метода remove
 Нажмите для удаления 
 
Восстановить удалённые кнопки 
  

Второй метод – это empty .

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

Синтаксис метода empty :

.empty()

Пример, в котором удалим все дочерние узлы у элемента с идентификатором «message»:

$('#message').empty();

Пример, в котором при нажатии на кнопку, получим элемент в котором она находится по селектору .content и удалим его содержимое:

 
Содержимое 1.
 Удалить содержимое 
  

Чтобы избежать утечек памяти, jQuery удаляет другие конструкции, такие как данные и обработчики событий, из дочерних элементов перед удалением самих элементов.

Если вы хотите удалить элементы, не уничтожая их данные или обработчики событий (чтобы их можно было добавить позже), используйте вместо empty метод detach .

Третий метод – это remove .

Он используется для удаления выбранных элементов из DOM.

Синтаксис метода remove:

.remove( [selector ] )

Параметр selector является не обязательным. Его нужно использовать, когда вам нужно удалить из набора не все элементы, а только те которые соответствуют селектору.

Метод remove похож на empty , но в отличие от него он удаляет не только все дочерние узлы, но и сам элемент. В дополнение вместе с элементами удаляются все связанные с ними события и данные jQuery. Если вам нужно удалить элементы без удаления данных и событий, то используйте метод detach .

Пример, в котором будем удалять кнопку при нажатии на неё.

JavaScript

$('button').click(function() { $(this).remove(); });

Четвёртый метод для удаления элементов из DOM – это unwrap .

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

Синтаксис метода unwrap :

.unwrap( [selector ] )

Метод unwrap имеет один необязательный параметр selector . В качестве данного параметра задаётся селектор, который будет использоваться для проверки родительского элемента. Если родительский элемент не соответствует селектору, то он не будет убран из DOM.

Пример использования метода unwrap для удаления оборачиваемых элементов у каждого элемента текущего набора:

С использованием selector . Например, будем удалять только те оборачиваемые элементы, которые соответствуют селектору «.container-1»:

$('.inner').unwrap('.container-1'); // после выполнения: // // 
// //
 

Как переместить элемент в jQuery

Если вам нужно именно переместить элемент, а не скопировать, то в jQuery это можно выполнить посредством использования нескольких методов.

 
.
 Переместить кнопку в .content-2 
 
.
 
 

Как в этом примере осуществляется перемещение? Сначала мы получаем элемент, который мы хотим переместить, в данном случае «#move». После этого вызываем метод detach , который удалит элемент из текущего места. В качестве результата он нам возвратит удалённый элемент. Далее удалённый элемент с помощью метода appendTo вставляем в нужное место.

В этом примере использовался метод detach , потому что мы хотели сохранить все связанные с ним данные jQuery и обработчики событий. Если это не нужно, то вместо метода detach можно использовать метод remove .

Вставка дочерних, сестринских и родительских элементов

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Вставка дочерних элементов и элементов-потомков

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

Методы для вставки дочерних элементов и элементов-потомков

Метод	Описание
append(HTML), append(jQuery), append(HTMLElement[])	Вставляет указанные элементы в качестве последних дочерних элементов во все выбранные элементы
prepend(HTML), prepend(jQuery), prepend(HTMLElement[])	Вставляет указанные элементы в качестве первых дочерних элементов во все выбранные элементы
appendTo(jQuery), appendTo(HTMLElement[])	Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних дочерних элементов в элементы, заданные аргументом
prependTo(HTML), prependTo(jQuery), prependTo(HTMLElement[])	Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых дочерних элементов в элементы, заданные аргументом
append(функция), prepend(функция)	Добавляет результат, возвращаемый функцией, в окончание или начало содержимого каждого из элементов, содержащихся в объекте jQuery

Для вставки дочерних элементов можно использовать также метод wrapInner(), рассматриваемый далее. Этот метод помещает новый дочерний элемент между элементом и его существующими дочерними элементами.

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

Пример использования метода append() приведен ниже:

$(function() ") .append("") .append("Лилии:") .append(""); newElems.css("border", "thick solid red"); $('#row1').append(newElems); >);

В этом сценарии метод append() используется двояким образом: сначала — для построения нужного набора новых элементов, а затем — для вставки этих элементов в HTML-документ. Поскольку метод append() — первый из рассматриваемых нами методов, предназначенных для выполнения DOM-манипуляций, я затрачу немного времени на то, чтобы продемонстрировать некоторые особенности его поведения, знание которых позволяет избежать большинства распространенных ошибок, связанных с использованием jQuery для работы с DOM. Однако сначала взгляните на результаты работы данного сценария, представленные на рисунке:

Первое, на что следует обратить внимание, — это способ, используемый для построения новых элементов с помощью метода append():

 var newElems = $(" ") .append("") .append("Лилии:") .append("");

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

Так, в данном сценарии отправной точкой служит объект jQuery, содержащий элемент div, а результатом работы каждого из вызываемых методов append() также является объект jQuery(), содержащий тот же элемент div, а не элемент, который добавляется. Это означает, что цепочка вызовов метода append(0) создает для каждого из первоначально выбранных элементов не вложенную последовательность новых элементов, а ряд новых дочерних элементов.

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

 newElems.css("border", "thick solid red");

Эта возможность чрезвычайно удобна, поскольку позволяет создавать сложные наборы элементов и в полном объеме выполнять над ними все необходимые подготовительные операции до их вставки в документ.

Наконец, вновь созданные элементы добавляются в документ с помощью следующей строки кода:

 $('#row1').append(newElems); 

Новые элементы добавляются в каждый из элементов выбранного набора. В данном случае выборка состоит всего лишь из одного элемента (имеющего идентификатор row1), добавление которого приводит к появлению на странице изображения лилии.

Вставка содержимого в начало элементов

Дополнением к методу append() служит метод prepend(), с помощью которого можно вставлять новые элементы в качестве дочерних элементов в каждый из элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

$(function() < var orchidElems = $("") .append("") .append("Орхидея:") .append(""); var newElems = $("") .append("") .append("Лилия:") .append("").add(orchidElems); newElems.css("border", "thick solid red"); $('#row1, #row2').prepend(newElems); >);

В данном примере проявляется еще одна важная особенность методов jQuery, предназначенных для выполнения DOM-манипуляций: все элементы, передаваемые в виде аргумента любому из этих методов, добавляются в качестве дочерних элементов во все элементы, содержащиеся в объекте jQuery. В сценарии создаются два элемента div: один — для лилий, второй — для орхидей. Для объединения обоих наборов элементов в одном объекте jQuery используется метод add().

Далее в сценарии создается другой объект jQuery, содержащий элементы со значениями id, равными row1 и row2, а вставку в документ элементов, соответствующих лилиям и орхидеям, обеспечивает вызов метода prepend(). Результат выполнения сценария представлен на рисунке:

Новые элементы выделены рамками красного цвета. Вы видите, что оба элемента, соответствующие лилиям и орхидеям, добавлены в оба элемента row. Вместо того чтобы использовать метод add(), можно воспользоваться передачей сразу нескольких элементов методам, предназначенным для изменения DOM, как показано в примере ниже:

$(function() < var orchidElems = $("") .append("") .append("Орхидея:") .append(""); var lilyElems = $("") .append("") .append("Лилия:") .append(""); $('#row1, #row2').prepend(lilyElems, orchidElems); >);

Вставка одних и тех же элементов в разные места документа

Один и тот же набор новых элементов может быть вставлен в документ только один раз. После этого любая попытка использования этого набора в качестве аргумента при вызове методов, предназначенных для вставки в DOM новых узлов, приведет не к дублированию этого набора, а к его перемещению. Чтобы понять суть проблемы, обратимся к примеру:

$(function() < var orchidElems = $("") .append("") .append("Орхидея:") .append(""); var newElems = $("") .append("") .append("Лилия:") .append("").add(orchidElems); newElems.css("border", "thick solid red"); $('#row1').append(newElems); $('#row2').prepend(newElems); >);

Цель данного сценария кажется очевидной: вставить набор новых элементов в окончание элемента row1 и в начало элемента row2. Разумеется, на самом деле происходит нечто другое, как показано на рисунке:

Действительно, элементы вставляются в окончание элемента row1, но вызов метода prepend() приводит не к их повторной вставке, а к перемещению. Для решения этой проблемы следует создать копии элементов, подлежащих вставке, с помощью метода clone(). Пересмотренный вариант сценария приведен ниже:

. $('#row1').append(newElems); $('#row2').prepend(newElems.clone());

Теперь в результате их копирования элементы вставляются в оба места в документе:

Вставка элементов из объекта jQuery

В случае использования методов appendTo() и prependTo() все меняется местами: элементы, содержащиеся в объекте jQuery, вставляются в качестве дочерних элементов внутрь элементов, заданных аргументом. Соответствующий пример приведен ниже:

$(function() < var newElems = $(""); $('img').appendTo(newElems); $('#row1').append(newElems); >);

В этом сценарии мы создаем объекты jQuery, которые содержат новые элементы div и img, подлежащие вставке в документ. Затем элементы img вставляются в элемент div в качестве его дочерних элементов с помощью метода appendTo(). Конечный результат показан на рисунке:

Как нетрудно заметить, выполнение сценария приводит к тому, что все элементы img перемещаются в новый элемент div, который был добавлен в элемент row1.

Вставка элементов с использованием функции

Методы append() и prepend() могут принимать в качестве аргумента также функцию. Это обеспечивает возможность динамической вставки дочерних элементов в каждый из элементов, выбранных объектом jQuery, как показано ниже:

$(function() < var orchidElems = $("") .append("") .append("Орхидея:") .append(""); var lilyElems = $("") .append("") .append("Лилия:") .append(""); $(orchidElems).add(lilyElems).css("border", "thick solid red"); $('div.drow').append(function(index, html) < if (this.id == "row1") < return orchidElems; >else < return lilyElems; >>); >);

Функция вызывается однократно для каждого из элементов, содержащихся в объекте jQuery. Аргументами функции являются индекс элемента в выбранном наборе и строка, содержащая HTML-код обрабатываемого элемента. Переменная this ссылается на текущий элемент набора. Возвращаемый функцией результат вставляется в конце или в начале обрабатываемого элемента. Функция может возвращать HTML-строку, один или несколько объектов HTMLElement или объект jQuery.

В этом примере сначала создаются необходимые HTML-фрагменты для лилий и орхидей, после чего функция, передаваемая методу append() в качестве аргумента, возвращает нужный фрагмент, исходя из значения свойства id. Результаты работы сценария показаны на рисунке:

Вставка родительских элементов и элементов-предков

Библиотека jQuery предоставляет набор методов, обеспечивающих вставку элементов в документ как родительских или элементов-предков по отношению к существующим элементам. Такого рода операции называются , или внешней вставкой, (поскольку добавляемый элемент окружает собой уже существующие элементы). Краткое описание этой группы методов приведено в таблице ниже:

Методы для внешней вставки родительских элементов и элементов-предков

Метод	Описание
wrap(HTML), wrap(jQuery), wrap(HTMLElement[])	Обертывает указанные элементы вокруг каждого из элементов, содержащихся в объекте jQuery
wrapAll(HTML), wrapAll(jQuery), wrapAll(HTMLElement[])	Обертывает указанные элементы вокруг набора элементов, содержащихся в объекте jQuery (рассматриваемых как единая группа)
wrapInner(HTML), wrapInner(jQuery), wrapInner(HTMLElement[])	Обертывает указанные элементы вокруг содержимого каждого из элементов, содержащихся в объекте jQuery
wrap(функция), wrapInner(функция)	Динамически обертывает элементы с использованием функции

При обертывании элементов эти методы могут принимать HTML-фрагмент в качестве аргумента, но всегда следует проверять, чтобы этот фрагмент содержал только один внутренний элемент. В противном случае jQuery не сможет определить, что именно необходимо сделать. Отсюда следует, что каждый элемент в аргументе метода может иметь не более одного родительского и не более одного дочернего элемента.

Пример использования метода wrap() приведен ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('div.drow').wrap(newElem); >);

В этом сценарии мы создаем новый элемент div и используем метод css() для установки значения CSS-свойства border. Затем элемент div добавляется в качестве родительского элемента по отношению ко всем элементам div с классом drow в документе. Результаты выполнения сценария представлены на рисунке:

Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом.

Обертывание набора элементов

Когда используется метод wrap(), новые элементы клонируются, и каждый из элементов, содержащихся в объекте jQuery, получает собственный новый родительский элемент. Чтобы вставить в документ элемент, который станет родительским сразу для нескольких элементов, следует использовать метод wrapAll(), как показано ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('div.drow').wrapAll(newElem); >);

Этот сценарий отличается от предыдущего лишь тем, что в нем используется метод wrapAll(). Страница в окне браузера показана на рисунке:

Новый элемент добавляется как общий родительский элемент для всего набора выбранных элементов.

Будьте внимательны, используя этот метод. Если выбранные элементы не имеют общих родителей, то новый элемент будет добавлен как родительский для первого из них. После этого jQuery переместит все остальные элементы так, чтобы они стали сестринскими по отношению к первому элементу:

$(function() < var newElem = $("").css("border", "thick solid red"); $('img').wrapAll(newElem); >);

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

Новый элемент div был добавлен в документ как родительский по отношению к элементу img, соответствующему изображению астры, тогда как все остальные элементы изображений были перемещены в структуре DOM в позиции сестринских по отношению к нему элементов.

Обертывание содержимого элементов

Метод wrapInner() позволяет окружать элементами содержимое других элементов (а не сами элементы). Соответствующий пример приведен ниже:

$(function() < var newElem = $("").css("border", "thick solid red"); $('.dcell').wrapInner(newElem); >);

Метод wrapInner() вставляет новые элементы между каждым из содержащихся в объекте jQuery элементом и его дочерним элементом. В данном сценарии выбираются элементы, принадлежащие классу dcell, и содержимое каждого из них заключается в новый элемент div. Страница в окне браузера показана на рисунке:

Вставка сестринских элементов

Как вы уже могли догадаться, jQuery предоставляет также набор методов, обеспечивающих вставку элементов в документ как сестринских по отношению к существующим элементам. Краткое описание этой группы методов приведено в таблице ниже:

Методы для вставки сестринских элементов

Метод	Описание
after(HTML), after(jQuery), after(HTMLElement[])	Вставляет указанные элементы в качестве последних дочерних элементов во все выбранные элементы
before(HTML), before(jQuery), before(HTMLElement[])	Вставляет указанные элементы в качестве первых дочерних элементов во все выбранные элементы
insertAfter(HTML), insertAfter(jQuery), insertAfter(HTMLElement[])	Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних дочерних элементов в элементы, заданные аргументом
insertBefore(HTML), insertBefore(jQuery), insertBefore(HTMLElement[])	Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых дочерних элементов в элементы, заданные аргументом
after(функция), before(функция)	Добавляет результат, возвращаемый функцией, в окончание или начало содержимого каждого из элементов, содержащихся в объекте jQuery

Вызовы методов before() и after() следуют тем же шаблонам, что и другие методы вставки элементов в документ, с которыми вы уже познакомились. Пример использования обоих методов приведен ниже:

$(function() < var orchidElems = $("") .append("") .append("Орхидея:") .append(""); var lilyElems = $("") .append("") .append("Лилия:") .append(""); $(orchidElems).add(lilyElems).css("border", "thick solid red"); $('#row1 div.dcell').after(orchidElems); $('#row2 div.dcell').before(lilyElems); >);

В этом сценарии мы создаем наборы элементов для орхидей и лилий, а затем вставляем их в документ с помощью методов before() и after() как сестринские элементы по отношению к каждому из элементов, принадлежащих классу dcell. Элементы, соответствующие орхидеям, вставляются как следующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row1, тогда как элементы, соответствующие лилиям, вставляются как предшествующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row2.

Вид страницы в окне браузера представлен на рисунке:

Вставка сестринских элементов из объекта jQuery

Методы insertAfter() и insertBefore() вставляют элементы, содержащиеся в объекте jQuery, в качестве следующих или предшествующих сестринских элементов по отношению к элементам, переданным методу в качестве аргумента. Это та же функциональность, которую обеспечивают методы after() и before(), но отличающаяся тем, что объект jQuery и аргумент метода меняются ролями.

Пример использования обоих методов приведен ниже:

. orchidElems.insertAfter('#row1 div.dcell'); lilyElems.insertBefore('#row2 div.dcell'); 

Вставка сестринских элементов с использованием функции

Сестринские элементы можно вставлять динамически, передавая методам after() и before() функцию в качестве аргумента. Пример динамической генерации сестринских элементов приведен ниже:

$(function() < $('#row1 div.dcell').after(function(index, html) < if (index == 0) < return $("") .append("") .append("Орхидея:") .append("") .css("border", "thick solid red"); > else if (index == 1) < return $("") .append("") .append("Лилия:") .append("") .css("border", "thick solid red"); > >); >);

В этом сценарии сестринские элементы генерируются для тех элементов, для которых передаваемый функции аргумент index принимает значение 0 или 1. Страница в окне браузера показана на рисунке:

Добавление элементов в DOM

Рассмотрим четыре метода jQuery, которые позволяют добавлять новый контент:

• append() — добавляет контент в конец выбранного элемента
• prepend() — добавляет контент в начало выбранного элемента
• after() — добавляет контент после выбранного элемента
• before() — добавляет контент перед выбранным элементом

jQuery append() метод

Пример использования метода append: