3.11.1. Манипуляции HTML-элементами

Опубликовано: 10 августа 2015 Обновлено: 7 января 2020 2 комментария

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

Управление набором элементов

1. Добавление содержимого на страницу

1.1. Метод .html()

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

.html()
Метод указывается без параметров. Возвращает содержимое первого элемента в соответствующем наборе в виде HTML-разметки.
.html(фрагмент разметки)
фрагмент разметки — добавляет фрагмент HTML-разметки к содержимому всех элементов соответствующего набора.
.html(функция)
функция — принимает два аргумента: индекс элемента и текущее содержимое элемента. Возвращаемое значение добавляется в качестве нового содержимого.

1.2. Метод .text()

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

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

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

2.1. Метод .append()

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

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

2.2. Метод .appendTo()

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

.appendTo(элемент, к которому добавляется содержимое)
элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.

2.3. Метод .prepend()

Работает аналогично с .append(), только новое содержимое добавляется в начало, сразу после открывающегося тега элемента, перед содержимым элемента.

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

2.4. Метод .prependTo()

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

.prependTo(элемент, к которому добавляется содержимое)
элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.

2.5. Метод .before()

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

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

2.6. Метод .insertBefore()

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

.insertBefore(элемент, к которому добавляется содержимое)
элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.

2.7. Метод .after()

Добавляет содержимое, указанное в параметре метода, в дерево DOM, после каждого элемента обернутого набора.

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

2.8. Метод .insertAfter()

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

.insertAfter(элемент, к которому добавляется содержимое)
элемент, к которому добавляется содержимое — к элементу добавляется селектор, HTML-элемент, массив элементов, строка или объект jQuery.

2.9. Метод .wrap()

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

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

2.10. Метод .wrapAll()

Оборачивает все элементы набора как единое целое в указанную HTML-разметку.

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

2.11. Метод .wrapInner()

Оборачивает содержимое элементов набора, включая текстовое содержимое, в указанную HTML-разметку.

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

3. Замена и удаление элементов

3.1. Метод .unwrap()

Удаляет элемент, обертывающий набор.

.unwrap()
Метод вызывается без параметров.

3.2. Метод .detach()

Удаляет все элементы обернутого набора из DOM. Сохраняет нетронутыми данные и события, связанные с элементами. Все дочерние элементы также исключаются из DOM. Исключенные элементы и связанные с ними данные позднее можно вернуть в дерево DOM.

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

3.3. Метод .remove()

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

.remove(селектор)
селектор — необязательный параметр, уточняет, какие именно элементы подлежат удалению.

3.4. Метод .empty()

Удаляет содержимое всех элементов набора, удаляя все содержимое, а также все дочерние элементы, находящиеся внутри него.

.empty()
Методу не передаются аргументы.

3.5. Метод .replaceWith()

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

.replaceWith(новое содержимое)
новое содержимое — определяет вставляемое содержимое. Может быть фрагмент HTML-разметки с содержимым или без него, селектор, массив элементов или объект jQuery.
.replaceWith(функция)
функция — возвращаемое значение заменит каждый элемент обернутого набора.

3.6. Метод .replaceAll()

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

.replaceAll(целевой элемент)
целевой элемент — селектор, объект JQuery, HTML-элемент или массив элементов, которые нужно заменить.

3.7. Метод .clone()

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

.clone()
логическое значение — указывает, должны ли вместе с элементами копироваться их обработчики событий. Значение по умолчанию false. Если установлено true, то вместе с элементами будут скопированы обработчики событий.

Поделиться: