Метод wrap. Обертывание элементов. Метод wrap Замена и удаление элементов

Манипуляции 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 содержимое2 — необязательный параметр, определяет дополнительное содержимое, добавляется один или несколько HTML-элементов, массивов, строк или объектов jQuery. .append(функция) функция

2.2. Метод.appendTo()

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

AppendTo(элемент, к которому добавляется содержимое)

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(функция) функция

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(функция обратного вызова) функция обратного вызова

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 , то вместе с элементами будут скопированы обработчики событий.

jQuery DOM методы Определение и применение

jQuery метод .wrapAll() обертывает все элементы (элемент) в наборе, выбранным HTML элементом.

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

jQuery синтаксис: Синтаксис 1.2: $(selector ).wrapAll(wrappingElement ) Синтаксис 1.4: $(selector ).wrapAll(function ) До jQuery 3.0, функция некорректо работала и вызывалась для каждого элемента в наборе, она получала индекс элемента в наборе в качестве параметра (по аналогии с методом.wrap()). Добавлен в версии jQuery 1.2 (синтаксис обновлен в 1.4) Значения параметров Пример использования Использование jQuery метода.wrapAll() (обертывание HTML элементом)

.violetBorder /* устанавливаем сплошную границу фиолетового цвета размером 1 пиксель */ }

$("p ").wrapAll(" "); // обертываем все элементы

В наборе } ); } ); Клик

Обычный абзац

Второй обычный абзац

Третий обычный абзац

.wrapAll()

в наборе элементом с классом .violetBorder .

Аналогичного результата можно достичь при создании DOM элемента:

$("p ").wrapAll(document.createElement ("div "));

Результат нашего примера:

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

Использование jQuery метода.wrapAll() (обертывание несколькими HTML элементами)

div { border : 1px solid violet ; }

$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $("span ").wrapAll(" "); // обертываем все элементы в наборе } ); } ); Клик Обычный span

Обычный абзац

Второй обычный span

В этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы в документе несколькими HTML элементами. Обратите внимание как сгруппировались элементы , и как при этом изменился поток документа.

Результат нашего примера:

Рассмотрим следующий пример в котором в качестве параметра метода .wrapAll() передадим функцию.

Использование jQuery метода.wrapAll() (функция в качестве параметра)

div { border : 1px solid orange ; /* устанавливаем сплошную границу оранжевого цвета размером 1 пиксель */ }

$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $("span ").wrapAll(function (){ // обертываем все элементы в наборе $(this ).css("color ", "red "); // устанавливаем первому элементу в наборе цвет текcта красный return " "; // возвращаем значение функции } ); } ); } ); Клик Обычный span Второй обычный span Третий обычный span

В этом примере с использованием jQuery метода .wrapAll() мы при нажатии на кнопку обертываем все элементы

Последнее обновление: 1.11.2015

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

Метод wrap

Метод wrap обертывает элементы выборки тем элементом, которые передается в качестве аргумента в данный метод. Он имеет следующие варианты использования:

wrap("разметка html") : обертывает элементы выборки в элемент, создаваемый из разметки html

wrap(элемент) : обертывает элементы выборки в элемент html, переданный в качестве параметра

wrap("селектор") : обертывает элементы выборки в элемент документа, соответствующий селектору

wrap(jQuery) : обертывает элементы выборки в объект jQuery

wrap(функция) : обертывает элементы выборки в объект, возвращаемый функцией

Пусть у нас есть следующая разметка:

• Java
• C/C++

Обернем список с помощью метода wrap:

$(".langs").wrap("");

• Java
• C/C++

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

Var header = document.getElementById("header"); $(".langs").wrap(header);

Обратите внимание, что в данном случае список вставляется не в существующий элемент, а просто существующий элемент клонируется, и в эту копию обертывается список.

Метод wrapAll

Для обертки всех элементов выборки как единого целого в один элемент используется метод wrapAll . Он имеет похожие варианты использования:

wrapAll("разметка html") : обертывает все элементы выборки в один элемент, создаваемый из разметки html

wrapAll(элемент) : обертывает все элементы выборки в один элемент html, переданный в качестве параметра

wrapAll("селектор") : обертывает все элементы выборки в один элемент, соответствующий селектору

wrapAll(jQuery) : обертывает все элементы выборки в один объект jQuery

Например, имеется следующая разметка:

Java C/C++ PHP

Обернем все эти элементы в один элемент div:

$(".lang").wrapAll("");

После этого разметка будет выглядеть следующим образом:

Java C/C++ PHP

Метод wrapInner

Для обертки содержимого элементов в новый элемент служит метод wrapInner . Он имеет следующие варианты использования:

wrapInner("разметка html") : обертывает содержимое элементов выборки в элемент, создаваемый из разметки html

wrapInner(элемент) : обертывает содержимое элементов выборки в элемент html, переданный в качестве параметра

wrapInner("селектор") : обертывает содержимое элементов выборки в элемент документа, соответствующий селектору

wrapInner(jQuery) : обертывает содержимое элементов выборки в объект jQuery

wrapInner(функция) : обертывает содержимое элементов выборки в объект, возвращаемый функцией

Исходная разметка будет выглядеть так:

• Java
• C/C++

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

$("li.lang").wrapInner("");

Финальная разметка будет выглядеть так:

В данном уроке разбирается работа с атрибутами, со свойствами, с продвинутыми селекторами jQuery.

Работа с атрибутами

Сейчас мы с вами научимся считывать, добавлять и изменять атрибуты HTML тегов через jQuery. Все это делается с помощью метода .attr() . Работает он подобно методу .html() - в зависимости от количества параметров он будет считывать или изменять значение атрибута.

Первым параметром .attr() принимает имя атрибута, а вторым - его новое значение. Например, так - .attr("value", "www") - мы запишем строку "www" в атрибут value .

Если же вызывать .attr() с одним параметром, то он вернет значения атрибута, название которого мы указываем в первом параметре. Например, так - .attr("value") - мы получим значение атрибута value.

В следующем примере мы получаем инпут по его id и выводим на экран значение его атрибута value:

alert($("#test").attr("value")); //выведет "!!!"

А теперь запишем новое значение "www" в этот же атрибут:

$("#test").attr("value", "www");

Удаление атрибута

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

$("#test").removeAttr("value");

HTML код станет выглядеть так - атрибута value больше нет:

Свойства

Для атрибутов типа disabled и checked метод .attr() не подходит (такие атрибуты называются "свойства"). Для них необходимо использовать метод .prop() , который первым параметром принимает имя атрибута, а вторым - true или false.

Если поставить true - атрибут установится, а если false - удалится.

Давайте установим для инпута атрибут disabled :

$("#test").prop("disabled", true);

HTML код станет выглядеть так:

А теперь, наоборот, уберем disabled:

$("#test").prop("disabled", false);

HTML код станет выглядеть так:

Можно не только изменять значения таких атрибутов-свойств, но и считывать их:

alert($("#test").prop("disabled")); //выведет true - атрибут есть

value форм

Для работы с атрибутом value инпутов также можно использовать метод .val() , который позволяет считывать и записывать новые значения.

Давайте запишем новое значение "www" в атрибут value:

$("#test").val("www");

HTML код станет выглядеть так:

А теперь давайте выведем текущее значение на экран:

alert($("#test").val());

Есть еще один нюанс - для тега textarea нельзя получить внутреннее содержимое через метод .html() . Для этого нужно пользоваться методом .val() :

!!! alert($("#test").val()); //выведет "!!!"

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

Работа с классами

Напоминаю, что в атрибуте class в HTML коде можно писать несколько классов через пробел.

Представим себе такую ситуацию - вы хотите добавить новый класс к имеющимся, не затерев их при этом. В этом случае, просто взять и сделать .attr("class", "new-class") не получится - вы затрете те классы, которые уже есть в атрибуте.

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

В следующем примере элементу, у которого уже есть два класса - class="www zzz" - добавляется еще и класс kkk . В результате содержимое атрибута станет таким - class="www zzz kkk" :

Текст абзаца.

$("#test").addClass("kkk");

HTML код станет выглядеть так:

Текст абзаца.

Аналогичный метод существует и для удаления класса - .removeClass() . Он удаляет указанный в параметре класс, не затрагивая остальных.

В следующем примере из атрибута class="www zzz" удаляется класс zzz :

Текст абзаца.

$("#test").removeClass("zzz");

HTML код станет выглядеть так:

Текст абзаца.

Существует также полезный метод .toggleClass() , который будет добавлять указанный класс, если его нет, и убирать его если он есть. Он может понадобится, чтобы по клику на одну и ту же кнопку с элементом страницы происходили периодические изменения.

Давайте, например, сделаем так - по нажатию на кнопку первый раз - элементу будет добавляться класс red, который добавляет красный цвет, а по повторному нажатию - этот класс будет убираться и красный цвет будет пропадать. Если опять нажать на кнопку - все повторится опять.

Попробуйте запустите следующий код и убедитесь в этом (класс zzz делает курсив , чтобы показать, что toggleClass не будет мешать другим классам работать):

Red { color: red; } .zzz { font-style: italic; }

Текст абзаца.

$("#test").toggleClass("red");

После первого нажатия HTML код станет выглядеть так (добавится класс red):

Текст абзаца.

А после второго нажатия - так (исчезнет класс red):

Текст абзаца.

Ну, и последний метод работы с классами, который мы разберем, называется .hasClass() . Он проверяет наличие или отсутствие класса, переданного ему параметром. Если такой класс есть у элемента - выведет true , а если такого класса нет - выведет false .

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

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

К примеру, обернем все абзацы с классом www тегом . Для этого параметром метода передадим строку "div", вот так - .wrap("div"). Смотрите, что у нас получится:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").wrap("div");

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

Параметром можно передавать не только имя тега, но и такую конструкцию - "" - в этом случае эффект будет абсолютно такой же:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").wrap("");

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

Конечно же, второй способ - "" - менее удобный, однако, у него есть преимущество - в открывающий тег (в нашем случае див ) можно писать любые атрибуты, при этом оборачивание будет вместе с этими атрибутами.

Давайте обернем наши абзацы дивом с классом zzz :

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").wrap("");

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

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

В следующем примере у нас есть абзацы, которые находятся внутри тегов . Давайте для абзацев с классом www выполним операцию разворачивания unwrap:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").unwrap();

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

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

В следующем примере обернем текст внутри абзацев с классом www в тег :

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").wrapInner("b");

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

Можно оборачивать не каждый элемент по отдельности, а все найденные элементы вместе с помощью метода .wrapAll()

Давайте найдем все абзацы с классом www и обернем их всех в один тег :

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

$(".www").wrapAll("div");

HTML код станет выглядеть так:

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

Учтите, что если оборачиваемые элементы стоят не рядом, то метод .wrapAll() сначала переместит элементы в одно место, а потом обернет их. Смотрите следующий пример:

Текст абзаца 1.

Текст абзаца 2.

Текст абзаца.

Текст абзаца 3.

$(".www").wrapAll("div");

HTML код станет выглядеть так:

Текст абзаца 1.

Текст абзаца 2.

Текст абзаца 3.

Текст абзаца.

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

Для вставки элементов в jQuery предусмотрено 4 метода: .append(), .prepend(), .after(), .before().

Метод .prepend() позволяет добавлять текст в начало элементов:

Текст абзаца.

$("p").prepend("!!!");

HTML код станет выглядеть так:

!!!Текст абзаца.

Метод .append() позволяет добавлять текст в конец элементов:

Текст абзаца.

$("p").append("!!!");

HTML код станет выглядеть так:

Текст абзаца.!!!

Метод .before() позволяет добавлять текст в перед элементами:

Текст абзаца.

$("p").before("!!!");

HTML код станет выглядеть так:

!!!

Текст абзаца.

Метод .after() позволяет добавлять текст в после элементов:

Текст абзаца.

$("p").after("!!!");

HTML код станет выглядеть так:

Текст абзаца.

!!!

Существуют также альтернативные формы методов для вставки элементов. К примеру, вместо.append() можно использовать .appendTo() .

Разница в способе применения: если append принимает параметром вставляемые текст, то appendTo наоборот - параметром принимает селектор элементов, для которых следует применить append.

Следующие записи эквиваленты:

$(".www").append("!!!") $("!!!").appendTo(".www")

Есть также и другие эквивалентные методы. Вот они:

Методы .prepend() и .prependTo() :

$(".www").prepend("!!!") $("!!!").prependTo(".www")

Методы .before() и .insertBefore() :

$(".www").before("!!!") $("!!!").insertBefore(".www")

Методы .after() и .insertAfter() :

$(".www").after("!!!") $("!!!").insertAfter(".www")

Замена элементов

Можно заменять одни элементы на другие с помощью метода .replaceWith() . Давайте заменим все абзацы с классом www на !!! .