Клонирование элементов — JQuery
Материал из JQuery
.clone()
Метод создает копии выбранных элементов страницы и возвращает их в виде объекта jQuery. Элементы копируются вместе со всеми содержащимися внутри них элементами (так называемое глубокое копирование).
.clone([withDataAndEvents]):jQuery1.0withDataAndEvents — определяет, необходимо ли копировать данные и обработчики событий, установленные на копируемых элементах. По умолчанию, этот параметр равен false.
.clone([withDataAndEvents],[deepWithDataAndEvents]):jQuery1.5withDataAndEvents — аналогично версии выше, за исключением одного: в jQuery-1.5.0 значение этого параметра по умолчанию было ошибочно изменено на true. В jQuery-1.5.1 значение по умолчанию было установлено обратно в false.
deepWithDataAndEvents — определяет, нужно ли копировать данные и обработчики установленные на дочерних элементах клонируемого элемента. По умолчанию, принимает значение первого параметра.
Примеры
Допустим, на странице содержится следующий код:
<div> <div>Привет</div> <div>Пока</div> </div>
Если мы будем использовать метод append() для того, чтобы вставить элемент с классом hello в конец div’а с классом container, то как известно, append «вырежет» элемент из прошлого места, и вставит в новое. То есть, код:
$(".hello").appendTo(".container");сделает наш html-код таким:
<div> <div>Пока</div> <div>Привет</div> </div>
Если же нам необходимо не переместить элемент, а скопировать, можно воспользоваться методом clone:
$(".hello").clone().appendTo(".container");В этом случае, перемещен будет клон элемента с классом hello, а значит оригинал никуда не денется:
<div> <div>Привет</div> <div>Пока</div> <div>Привет</div> </div>
Сразу после клонирования, новые элементы существуют только локально, отдельно от страницы. Однако, даже в этот момент, над ними можно совершать такие же манипуляции, как и с элементами, которые находятся на странице. Например, относительно предыдущего примера можно сделать следующее:
$(".hello").clone() // сделаем копию элемента hello
.addClass("newElement") // добавим этой копии класс newElement
.text("И снова здравствуйте!") // изменим текст внутри нее
.appendTo(".container"); // вставим измененный элемент в конец элемента containerВ результате, страница станет такой:
<div> <div>Привет</div> <div>Пока</div> <div>И снова здравствуйте!</div> </div>
Параметры метода
По умолчанию, копии элементов не будут содержать обработчиков событий и данных, которыми обладали оригиналы. Если вам необходимо сделать копии, которые бы содержали эти атрибуты, задайте параметр
var $elem = $('#elem').data( "arr":[1] ), // оригинал элемента с закрепленным за ним массивом
$clone = $elem.clone(true) // создадим копию элемента
.data("arr", $.extend( [], $elem.data("arr") )); // и самостоятельно перепишем в нем arrВ случае, если необходимо, чтобы сами элементы были скопированы вместе с данными и обработчиками, а лежащие внутри них элементы — не обязательно, то для экономии компьютерных ресурсов можно указать второй параметр со значением false (этот параметр доступен начиная с jquery-1.5).
Ссылки
Манипуляции jQuery (вставки, удаления, копирования, перемещения атрибутов, CSS свойств и самих DOM элементов)
Категории: Attributes , Manipulation › Class Attribute , CSS
Добавляет заданный(е) класс(ы) в каждый элемент набора jQuery.
Возвращает: Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Outside
Вставляет заданное содержимое, либо перемещает указанные элементы, вставляя их после каждого элемента набора jQuery.
Возвращает: Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Inside
Добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.
Возвращает: Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Inside
Перемещает все элементы набора jQuery в конец содержимого каждого элемента, определяемого с помощью входного параметра.
Возвращает: Объект (набор jQuery перемещенных элементов).
Категории: Attributes , Manipulation › General Attributes
Получает или устанавливает значение(я) атрибута(ов) элементов набора jQuery в зависимости от заданного(ых) параметра(ов).
Возвращает: Строка (String) | Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Outside
Вставляет заданное содержимое, либо перемещает указанные элементы, вставляя их перед каждым элементом набора jQuery.
Возвращает: Объект (набор jQuery).
Категории: Manipulation › Copying
Создает копии элементов набора jQuery. (Клонирует элементы.)
Возвращает: Объект (набор jQuery).
Категории: CSS , Manipulation › Style Properties
Устанавливает одно или несколько CSS-свойств для всех элементов в наборе jQuery (либо получает значение заданного CSS-свойства для первого элемента набора jQuery).
Возвращает: Строка | Объект (набор jQuery).
Категории: Manipulation › DOM Removal
Удаляет элементы набора jQuery из DOM дерева, но с сохранением их jQuery-связей (обработчиков событий и хранимых данных).
Возвращает: Массив элементов.
Категории: Manipulation › DOM Removal
Полностью удаляет все содержимое (все дочерние узлы, включая текстовые) всех элементов в наборе jQuery.
Возвращает: Объект (набор jQuery).
Категории: Attributes , Manipulation › Class Attribute , CSS
Позволяет определить, имеется ли класс с указанным именем хотя бы у одного элемента в наборе jQuery.
Возвращает: Логическое значение (Boolean).
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение высоты первого элемента в наборе jQuery или задает CSS высоту для всех элементов набора.
Возвращает: Целое число (Integer), Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Inside
Получает HTML содержимое первого элемента набора jQuery или замещает содержимое каждого элемента в наборе jQuery заданным фрагментом HTML разметки.
Возвращает: Строка (String) | Объект (набор jQuery).
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение высоты первого элемента в наборе jQuery вместе с внутренними отступами (полями) padding, но без учета границ border.
Возвращает: Целое число (Integer).
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение ширины первого элемента в наборе jQuery вместе с внутренними отступами (полями) padding, но без учета границ border.
Возвращает: Целое число (Integer).
Категории: Manipulation › DOM Insertion, Outside
Перемещает элементы набора jQuery, вставляя их после элементов, определяемых с помощью входного параметра.
Возвращает: Объект (набор jQuery).
Категории: Manipulation › DOM Insertion, Outside
Перемещает элементы набора jQuery, вставляя их перед элементами, определяемыми с помощью входного параметра.
Возвращает: Объект (набор jQuery).
Это не окончательный список в данной категории.
Jquery как создать элемент — Вэб-шпаргалка для интернет предпринимателей!
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Во многих случаях элементы, которые требуется вставить в DOM, необходимо предварительно создавать. Рассмотрению способов создания содержимого посвящено несколько следующих разделов.
Важно понимать, что создание элементов не означает их автоматического добавления в DOM. Вы должны снабдить jQuery явными инструкциями относительно того, куда именно должны быть помещены новые элементы, о чем будет говориться в следующей статье.
Создание элементов с использованием функции $()
Одним из способов создания элементов является передача строки, содержащей HTML-фрагмент, функции $(), которая выполнит синтаксический анализ строки и создаст соответствующие DOM-объекты. Пример того, как это можно сделать, приведен в примере ниже:
В этом примере на основе одного HTML-фрагмента создаются два элемента: div и img. Поскольку мы работаем здесь с HTML-кодом, можно использовать фрагменты, содержащие DOM-структуру. В данном случае у элемента div имеется дочерний элемент img.
Объект jQuery, возвращаемый функцией $(), содержит лишь элементы верхнего уровня, указанные в HTML-фрагменте. Чтобы продемонстрировать это, в сценарии с помощью функции each() реализован вывод на консоль информации о каждом из элементов, содержащихся в объекте jQuery. Однако дочерние элементы не отбрасываются. К ним можно получить доступ, используя обычные методы, предназначенные для перемещения по структуре DOM-дерева. С этой целью в сценарии вызывается метод children(), и информация о каждом дочернем элементе также выводится на консоль. Результаты работы сценария, выводимые на консоль, выглядят следующим образом:
Создание новых элементов путем клонирования существующих
Метод clone() позволяет создавать новые элементы на основе существующих. Вызов этого метода приводит к клонированию каждого из элементов, содержащихся в объекте jQuery, вместе со всеми их элементами-потомками. Соответствующий пример приведен ниже:
В этом сценарии выбираются и клонируются все элементы div, принадлежащие классу dcell. Для демонстрации того, что при этом клонируются также элементы-потомки, в сценарии вызывается метод children() с селектором, обеспечивающим получение клонированных элементов img. Информация об элементах div и img выводится на консоль. Результаты работы сценария выглядят следующим образом:
Вызов метода clone(true) позволяет включить в процесс клонирования также обработчики событий и данные, связанные с элементами. Если аргумент опущен или имеет значение false, то обработчики событий и данные не копируются.
Создание элементов средствами DOM API
Для создания объектов HTMLElement можно использовать непосредственно программный интерфейс DOM, что, собственно говоря, jQuery и делает вместо вас, когда вы привлекаете для этой цели другие методики. Я не собираюсь подробно описывать DOM API и ограничусь приведением простого примера, представленного ниже, который даст вам возможность почувствовать, что именно представляет собой эта методика:
В этом сценарии создаются и конфигурируются два объекта HTMLElement, представляющие HTML-элементы div и img, и элемент img назначается дочерним элементом элемента div, как это было в первом примере. Затем элемент div в виде объекта HTMLElement передается функции $() в качестве аргумента, что позволяет использовать в оставшейся части сценария те же самые функции, что и в предыдущих примерах. Консольный вывод будет выглядеть следующим образом:
В этом уроке мы рассмотрим два варианта создания элементов в jQuery, и методы, предназначенные для добавления элементов на страницу, удаления, клонирования, замены одних элементов на другие, и перемещение элементов.
Как создать элемент в jQuery?
Создание элементов в jQuery осуществляется посредством передачи HTML-строки в главную функцию этой библиотеки.
Синтаксис создания элементов из HTML-строки:
Он имеет 2 параметра. Первый ( html ) обязательный. Здесь указывается HTML-строка, на основе которой нужно создать соответствующие элементы. Второй ( ownerDocument ) не обязательный. Он необходим для указания документа, в котором необходимо создать элементы. По умолчанию элементы создаются в том же документе, в который была загружена библиотека jQuery. Если вы хотите внедрить элементы в другой документ, то его явно необходимо указать с помощью этого параметра.
Пример создания элемента из HTML-строки:
Пример создания элемента не в документе, в который была загружена библиотека jQuery, а в другой #include :
Пример создания нескольких элементов из HTML-строки:
Созданный элемент не отобразиться на странице, так как мы его только создали. Для того чтобы элемент отобразился на странице его нужно вставить в неё. Как это выполнить рассмотрим ниже.
Этот способ создания элементов можно использовать только в том случае, если вы полностью доверяете источнику. Если же вы не уверены в источнике, из которого берёте HTML данные, то обязательно применяйте поэлементный способ создания нужного фрагмента.
Синтаксис создания HTML элемента:
Он имеет 2 параметра. Первый параметр ( html ) является обязательным. В нём указывается строка, описывающая HTML элемент, который необходимо создать. Например для создания элемнта div , она описывается как «
Cоздадим элемент используя синтаксис jQuery для создания HTML элемента:
Cоздадим HTML фрагмент, используя поэлементый способ создания:
С методом append познакомимся ниже. Он в этом коде используется чтобы добавить элементы img и figcaption в элемент figure .
Как вставить элементы на страницу?
В jQuery все методы для добавления элементов на страницу можно разбить на три большие группы.
Первая группа – это методы, предназначенные для вставки новых элементов внутрь других. К ним относится append, appendTo, prepend, prependTo, html и text.
Метод append
Метод append предназначен для вставки контента в конец каждого элемента набора, к которому он применяется.
Синтаксис метода append (2 варианта):
В качестве значения параметр content может принимать DOM-элемент, текстовый узел, массив элементов и текстовых узлов, HTML-строку или объект jQuery.
Метод append (1 вариант) может принимать на вход не один, а любое количество аргументов content . Используется это когда вам нужно вставить не один, а несколько элементов.
Вторая реализация метода append позволяет принимать в качестве аргумента функцию.
Функция в результате своего выполнения должна возвращать HTML-строку, элемент(ы) DOM, текстовый узел(ы) или объект jQuery. Другими словами, определять контент, который необходимо вставить в конец каждого элемента текущего набора. В качестве аргументов на вход функция получает индекс текущего элемента в наборе и его HTML код. Внутри функции ключевое слово this указывает на текущий элемент набора.
Пример, в котором с помощью метода append будем добавлять в конец элемента .info новый элемент div , содежащий текущее время:
Метод appendTo
Метод appendTo выполняет ту же задачу что и метод append . Отличие между ними в основном сводится к синтаксису, а именно в различии мест, в которых нужно размещать контент (что нужно вставить) и цель (куда нужно вставить). В случае с методом append цель предшествует контенту. Контент указывается в круглых скобках этого метода. В методе appendTo наоборот контент предшествует цели.
Синтаксис метода appendTo:
Параметр target является обязательным. В качестве значения он может принимать селектор, DOM-элемент, HTML-строку, массив элементов или объект jQuery. Этот параметр определяет цель, в которую будет вставлен соответствующий набор элементов.
Пример, в котором рассмотрим как с помощью метода append можно добавить элемент внутрь каждого элемента li :
Методы prepend и prependTo
Методы prepend и prependTo полностью аналогичны методам append и appendTo . Но, в отличии от них они вставляют новые элементы не в конец других элементов, а в их начало (т.е. перед всеми элементами расположенными в каждом из них).
Синтаксис метода prepend (2 варианта):
Синтаксис метода prependTo :
Пример, в котором добавим текст «Внимание!» перед содержимым элемента .message :
Методы text и html
Методы text и html подробно описаны в этой статье. Они применяются, когда нужно установить новое содержимое для каждого элемента текущего набора. Метод text используется, когда требуется установить текстовый контент, а html – когда HTML фрагмент. Кроме этого, данные методы применяются также для получения содержимого элементов.
Вторая группа – это методы, предназначенные для вставки новых элементов за пределами существующих элементов, т.е. перед или после них. К ним относятся after, insertAfter, before и insertBefore.
Метод after
Метод after применяется, когда вам нужно вставить некоторый контент после каждого элемента текущего набора.
Синтаксис метода after (2 варианта):
Назначение параметров и данные, которые они могут принимать такие же как у метода append. Перейти к описанию параметров метода append .
Пример, в котором добавим кнопку «Закрыть» после текста сообщения (элемента .message__text ):
Метод insertAfter
Метод insertAfter выполняет ту же функцию что и метод after . Их основное отличие заключается в том, что контент (что нужно вставить) и цель (куда нужно вставить) размещены наоборот. Т.е. в after цель располагается перед ним, а контент передаётся как аргумент этого метода (в круглых скобках). В insertAfter цель задаётся как аргумент этого метода (в круглых скобках), а контент указывается перед ним.
Синтаксис метода insertAfter :
Пример, в котором вставим после каждого элемента p элемент div с текстовым контентом «Это новый элемент»:
Методы before и insertBefore
Методы before и insertBefore полностью аналогичны методам after и insertAfter . Но, в отличии от них они вставляют новые элементы не после цели, а перед ней.
Пример, в котором добавим перед всеми элементами p элемент div с текстовым содержимым «Это новый элемент»:
Третью группу представляют методы, которые могут применяться, когда вам нужно вставить новый контент таким образом чтобы он был обернут относительно существующих. К этой группе относятся методы wrap, wrapAll и wrapInner.
Метод wrap
Метод wrap используется, когда вам нужно указанную HTML-структуру обернуть вокруг каждого элемента текущего набора.
Синтаксис метода wrap :
В качестве параметра wrappingElement можно указывать селектор, HTML-строку, DOM-элемент или объект jQuery, определяющий структуру, которая будет оборачивать соответствующие элементы. Когда вы передаете коллекцию jQuery, содержащую более одного элемента, или селектор, соответствующий нескольким элементам, будет использоваться первый элемент.
Во втором варианте реализации метода wrap в качестве аргумента может использоваться функция.
Функция должна возвращать в качестве результата HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, которая будет обарачиваться вокруг каждого элемента текущего набора. В качестве аргумента функция получает индекс элемента в наборе. Внутри функции this указавает на текущий элемент в наборе.
Обернём каждый элемент p в текущем наборе вокруг двух элементов div :
Метод wrapAll
Метод wrapAll применяется, когда нужно указанную HTML-структуру обернуть вокруг всех элементов текущего набора.
Данный метод не оборачивает каждый элемент набора, поэтому его имеет смысл использовать, когда все элементы набора имеют одного родителя или, другими словами, являются по отношению друг к другу соседями.
HTML-структура может иметь несколько уровней в глубину, но внутренний элемент в ней должен быть только один.
Параметр wrappingElement может принимать в качестве значения селектор, HTML-строку, DOM-элемент или объект jQuery. Данный параметр задаёт HTML-структуру, которая будет использоваться для оборачивания всех выбранных элементов.
Во втором варианте реализации метода wrapAll в качестве аргумента можно использовать функцию обратного вызова.
Данная функция в качестве результата должна возвращать HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, с помощью которой будут обёрнуты чтобы все текущие элементы. Внутри функции this указывает на первый элемент набора.
Обернём все элементы p вокруг HTML конструкции, состоящей из двух элементов div вложенных друг в друга:
Метод wrapInner
Метод wrapInner применяется, когда нужно обернуть содержимое каждого элемента набора в заданную HTML-структуру.
Параметр wrappingElement в этом методе принимает такие же значения как у метода wrap . Тоже касается, когда мы используем в качестве аргумента функцию.
Пример, в котором обернём содержимое каждого элемента li вокруг DOM-элемента b .
Как скопировать элемент в jQuery?
Копирование одного или нескольких элементов в jQuery осуществляется с помощью метода clone .
Синтаксис метода clone :
Параметры withDataAndEvents и deepWithDataAndEvents являются необязательными. По умолчанию первый параметр равен false , а второй равен значению первого.
Первый параметр withDataAndEvents указывает, следует ли копировать обработчики событий и данные вместе с элементами.
Второй параметр делает аналогичные действия, но не для самого клонированного элемента, а для всех его дочерних элементов.
Примеры использования метода clone.
1. При нажатии на элемент будем его клонировать, после чего вставлять скопированный элемент в конец.
Немного усовершенствуем скрипт. Укажем, что при клонировании элемента нужно копировать и его события. Для этого установим параметру withDataAndEvents значение true .
2. Пример, в котором будем копировать элемент, содержащий другие элементы, на один из которых «повешен» обработчик события.
Как заменить элемент в jQuery?
Замена каждого из выбранных элементов на другой в jQuery осуществляется с помощью метода replaceAll .
Синтаксис метода replaceAll :
Под параметром target понимается цель, т.е. те элементы которые нужно заменить. Указать на эти элементы можно посредством селектора, jQuery, массива или DOM-элемента.
При замене элементов метод replaceAll удаляет data и обработчики событий, связанные с удаляемыми узлами.
Например, заменим все элементы a на странице на элемент span с текстом «здесь была ссылка».
Ещё в jQuery есть метод replaceWith .
Данный метод работает наоборот. Здесь мы сначала выбираем элементы, которые хотим заменить, а затем в круглых скобках метода replaceWith указываем то, на что их хотим заменить.
Синтаксис метода replaceWith :
В качестве параметра этому методу можно передать новый контент в виде html-строки, DOM-элемента, массива или jQuery, а также определить его посредством функции.
Пример. При нажатию на кнопку button заменим её на элемент span с текстом, который был у кнопки.
Как удалить элемент в jQuery?
В jQuery имеется несколько методов для удаления элементов из DOM.
Первый метод – это detach .
Данный метод позволяет удалить все или часть элементов из выбранного набора.
Синтаксис метода detach :
Параметр selector является не обязательным. Он используется для указания селектора, в соответствии с которым будут удаляться не все элементы из набора, а только те которые ему соответствуют.
Например, удалим все элементы с классом info на странице:
Метод detach при удалении элементов не удаляет связанные с ними данные jQuery и обработчики событий. Таким образом при восстановлении элементов, удалённых с помощью метода detach , они будут связаны со всеми своими данными jQuery и обработчиками событий.
Рассмотрим это на примере:
Второй метод – это empty .
Это метод предназначен для удаления все дочерних узлов у каждого элемента из текущего набора.
Синтаксис метода empty :
Пример, в котором удалим все дочерние узлы у элемента с идентификатором «message»:
Пример, в котором при нажатии на кнопку, получим элемент в котором она находится по селектору .content и удалим его содержимое:
Чтобы избежать утечек памяти, jQuery удаляет другие конструкции, такие как данные и обработчики событий, из дочерних элементов перед удалением самих элементов.
Если вы хотите удалить элементы, не уничтожая их данные или обработчики событий (чтобы их можно было добавить позже), используйте вместо empty метод detach .
Третий метод – это remove .
Он используется для удаления выбранных элементов из DOM.
Синтаксис метода remove:
Параметр selector является не обязательным. Его нужно использовать, когда вам нужно удалить из набора не все элементы, а только те которые соответствуют селектору.
Метод remove похож на empty , но в отличии от него он удаляет не только все дочерние узлы, но и сам элемент. В дополнение вместе с элементами удаляются все связанные с ними события и данные jQuery. Если вам нужно удалить элементы без удаления данных и событий, то используйте метод detach .
Пример, в котором будем удалять кнопку при нажатии на неё.
Четвёртый метод для удаления элементов из DOM – это unwrap .
Метод unwrap применяется для удаления только родительских элементов у каждого элемента из текущего набора оставляя при этом соответствующие элементы на месте.
Синтаксис метода unwrap :
Метод unwrap имеет один необязательный параметр selector . В качестве данного параметра задаётся селектор, который будет использоваться для проверки родительского элемента. Если родительский элемент не соответствует селектору, то он не будет убран из DOM.
Пример использования метода unwrap для удаления оборачиваемых элементов у каждого элемента текущего набора:
С использованием selector . Например будем удалять только те оборачиваемые элементы, которые соответсвуют селектору «.container-1»:
Как переместить элемент в jQuery
Если вам нужно именно переместить элемент, а не скопировать, то в jQuery это можно выполнить посредством использования нескольких методов.
Как в этом примере осуществляется перемещение? Сначала мы получаем элемент, который мы хотим переместить, в данном случае «#move». После этого вызываем метод detach , который удалит элемент из текущего места. В качестве результата он нам возвратит удалённый элемент. Далее удалённый элемент с помощью метода appendTo вставляем в нужное место.
В этом примере использовался метод detach , потому что мы хотели сохранить все связанные с ним данные jQuery и обработчики событий. Если это не нужно, то вместо метода detach можно использовать метод remove .
Используем функцию append()
Создание новых элементов на jQuery можно осуществить несколькими путями. Самый простой из них, это использовать функцию append() (прибавить). Предположим, что у нас есть некий DIV, внутри которого тоже есть пара элементов, и необходимо создать ещё один, третий.
Если необходимо создать пустой DIV:
Если необходимо создать элемент с заданными атрибутами или текстом:
Поскольку в родительском контейнере уже есть несколько элементов, то новый элемент будет в конец родителя, то есть после second:
Используем функцию appendTo()
Можно пойти и другим путём, использовав немножко другую функцию, которая называется appendTo() (добавить к). Её отличие в том, что она вызывается не с родительского элемента, а с того, который будет добавлен. То есть эта функция как бы противоположна предыдущей. Результат выполнения следующего кода будет полностью идентичен предыдущему:
В чём же отличия, спросите Вы? Разница между append() и appendTo() заключается в логике цепочки вызовов. Многие функции jQuery возвращают объект типа jQuery для того, чтобы можно было удобно и компактно продолжить выполнять действия над ними. Взгляните на следующие 2 случая:
В первом случае функция append() вернёт объект с >appendTo() будет возвращать новосозданный элемент, и CSS-свойство будет применено только к нему.
Имейте ввиду, что описанными выше функциями можно не только создавать, а и перемещать уже существующие элементы, например, от одного родителя к другому. Пусть есть следующий HTML:
Если мы хотим переместить 4-й элемент внутрь третьего, выполнить следующий код:
Функции prepend() и prependTo()
Как мы выяснили, используя 2 предыдущие функции, можно создать элемент А и поместить его внутрь элемента Б, при этом А помещается в конец Б и становиться его последним дочерним элементом. Функции prepend() и prependTo() поступают наоборот: они делают элемент А первым из дочерних элементов родителя Б, то есть помещают его в начало Б. Если у нас есть такой HTML-код:
Выполним такой JavaScript:
Создаём и перемещаем элементы с помощью функций before() , after() , insertAfter() , insertBefore()
Функции, рассмотрены ранее, создают или перемещают элементы либо в начало, либо в конец родительского контейнера. Если необходимо поместить объект в заданное место, перед или после другого объекта, тогда можно использовать такие функции:
- цель.before(объект) — вставляет объект перед целью и возвращает цель.
- цель.after(объект) — вставляет объект после цели и возвращает цель.
- объект.insertBefore(цель) — вставляет объект перед целью и возвращает объект.
- объект.insertAfter(цель) — вставляет объект после цели и возвращает объект.
Пусть имеется такой HTML:
Если мы хотим создать какой-либо элемент и поместить его после first и перед second, а затем, к примеру, раскрасить его в зелёный цвет, тогда можно пойти двумя идентичными путями:
Если требуется создать объект, например, перед first и затем раскрасить first в зеленый цвет:
Я думаю, логика понятна, ничего сложного нет.
Как создавать элементы более удобно
Если новосозданному элементу необходимо задать несколько свойств или «повесить» на него несколько обработчиков событий, то более удобным синтаксисом для создания элементов может оказаться следующий:
Рекомендуем к прочтению
Манипуляции — JQuery
Материал из JQuery
С помощью функций из этого раздела вы можете узнавать и изменять состояние и содержимое элементов DOM. Это может быть изменение атрибутов (в том числе классов и идентификаторов), разнообразная работа с содержимым элементов (создание, удаление и добавление элементов и текста). Кроме того вы сможете узнавать такие параметры как размер элементов и скроллинга.
Список функций
Работа с атрибутами и свойствами
| .attr() | возвращает/изменяет (в зависимости от числа параметров) значение атрибута у элементов на странице |
| .removeAttr() | удаляет атрибут у элементов на странице |
| .prop() | возвращает/изменяет (в зависимости от числа параметров) значение заданного свойства у элементов на странице |
| .removeProp() | удаляет заданное свойство у элементов на странице |
| .addClass() | добавляет класс элементам на странице |
| .removeClass() | удаляет класс(ы) у элементов на странице |
| .toggleClass() | изменяет наличие класса у элементов на противоположное (добавляет/удаляет) |
| .hasClass(clName) | проверяет наличие заданного класса хотя бы у одного из выбранных элементов |
| .val() | возвращает/изменяет (в зависимости от числа параметров) значение атрибута value у элементов на странице |
Работа с параметрами и стилями
| .css() | Возвращает/изменяет (в зависимости от числа входных параметров) CSS параметры элемента |
| .height() .innerHeight() .outerHeight() | Возвращает/изменяет высоту элемента |
| .width() .innerWidth() .outerWidth() | Возвращает/изменяет ширину элемента |
| .position() .offset() | Возвращает/изменяет позицию элемента |
| .offsetParent() | Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию) |
| .scrollTop() .scrollLeft() | Возвращает/изменяет величину скроллинга (прокрутку) элемента |
Добавление содержимого
| .html() | Возвращает/изменяет (в зависимости от числа параметров) html-содержимое элементов на странице |
| .text() | Возвращает/изменяет (в зависимости от числа параметров) текст, находящийся в элементах на странице |
| .append() .appendTo() | Добавляет заданное содержимое в конец элементов на странице |
| .prepend() .prependTo() | Добавляет заданное содержимое в начало элементов на странице |
| .after() .insertAfter() | Добавляет заданное содержимое после элементов на странице |
| .before() .insertBefore() | Добавляет заданное содержимое перед элементами на странице |
| .wrap() .wrapAll() | Окружает элементы на странице заданными html-элементами |
| .wrapInner() | Окружает содержимое элементов на странице заданными html-элементами |
Удаление содержимого
| .detach() .remove() | Удаляет элементы на странице |
| .empty() | Удаляет содержимое элементов на странице |
| .unwrap() | Удаляет родительские элементы, при этом их содержимое остается на месте |
Замена элементов
| .replaceWith() .replaceAll() | Заменяет одни элементы страницы на другие (новые или уже существующие). |
Клонирование элементов
| .clone( ) | Возвращает копию выбранных элементов страницы. |