jQuery метод .replaceWith()

jQuery DOM методы

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

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)

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

ПараметрОписание
contentHTML строка, объект 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():


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

Пример использования jQuery метода .replaceWith()
Пример использования 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 метода .replaceWith() (функция в качестве параметра).
jQuery DOM методы