jQuery метод .replaceWith()

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

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

Обращаю Ваше внимание, что метод .replaceWith() удаляет все обработчики данных и событий, связанные с удаленными узлами.

jQuery синтаксис:

Синтаксис 1.2
$( selector ).replaceWith( content )

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

Синтаксис 1.4
$( selector ).replaceWith( function( index, element ) ) 

function - Function 
index - Integer
element - Element

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

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .replaceWith()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "p" ).replaceWith( "<h3>Replaced</h3>" ); // заменяем каждый целевой элемент новым содержимым
	    $( ".first, .third" ).replaceWith( "Im string" ); // заменяем каждый элемент с классом first и third новым содержимым
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Первый параграф</p>
		<p>Второй параграф</p>
		<p>Третий параграф</p>
		<hr>
		<div class = "first">Первый блок</div>
		<div class= "second">Второй блок</div>
		<div class= "third">Третий блок</div>
	</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции в качестве параметра метода .replaceWith()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){	  
          $("button").click(function(){  // задаем функцию при нажатиии на элемент <button> 
            $("p").replaceWith(function( i, el ){ // передаем функцию в качестве параметра метода 	
              return "<br>" + el + " с индексом " + i;  // возвращаем новое содержимое элемента
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Первый параграф</p>
		<p>Второй параграф</p>
		<p>Третий параграф</p>
	</body>
</html>

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

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

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

jQuery DOM методы