jQuery метод .replaceWith()

Определение и применение

jQuery метод .replaceWith() позволяет заменить выбранные элементы новым содержимым.

jQuery синтаксис:

Синтаксис 1.2

JavaScript

$( selector ).replaceWith( content )

content - htmlString, или Element (DOM), или jQuery (объект), или Array

Синтаксис 1.4

Код

$( selector ).replaceWith( function( index, oldHtml ) )

function - Function

index - Integer

oldHtml - String

Добавлен в версии jQuery

1.2 (синтаксис обновлен в версии 1.4)

Значения параметров

Параметр	Описание
content	HTML строка, объект jQuery, DOM элемент, которые будут заменены взамен каждого элемента.
function	Функция, возвращающая содержимое для замены набора соответствующих элементов. Функция принимает два аргумента: index - индекс элемента в коллекции jQuery. oldHtml - содержимое элемента.

Пример использования

Пример использования jQuery метода .replaceWith()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p>Третий параграф</p>
<hr />
<div class="first">Первый блок</div>
<div class="second">Второй блок</div>
<div class="third">Третий блок</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p').replaceWith('<h3>Replaced</h3>')
        $('.first, .third').replaceWith('Im string')
    })
})

В этом примере мы с использованием jQuery метода .replaceWith():

Заменяем каждый элемент <p> новым содержимым (заголовок третьего уровня <h3>).
Заменяем каждый элемент с классом first и third новом содержимым (вместо первого и третьего элемента <div> вставляется строка).

Рассмотрим пример в котором в качестве параметра метода .replaceWith() мы передадим функцию.

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

index.html

HTML

<button>Клик</button>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p>Третий параграф</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p').replaceWith(function (i, el) {
            return '<br>' + el + ' с индексом ' + i
        })
    })
})

В этом примере с использованием jQuery метода .replaceWith() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) заменяем элементы <p> содержимым, которое возвращает функция (перенос строки, содержимое элемента и его индекс).