.replaceWith()

.replaceWith( newContent )Возвращает: jQuery

Описание: Заменяет каждый элемент в наборе сопоставленных элементов заданным новым содержимым и возвращает набор элементов, которые были удалены.

версия добавлена: 1.2.replaceWith( newContent )
- newContent
  
  Тип: htmlString или Element или Array или jQuery
  
  Содержимое для вставки. Может быть строкой HTML, элементом DOM, массивом элементов DOM или объектом jQuery.
версия добавлена: 1.4.replaceWith( function )
- function
  
  Тип: Функция()
  
  Функция, которая возвращает содержимое для замены набора сопоставленных элементов.

Метод .replaceWith() удаляет содержимое из DOM и вставляет новое содержимое на его место с одним вызовом. Рассмотрим такую структуру DOM:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Второе внутреннее <div> можно заменить указанным HTML:

$( "div.second" ).replaceWith( "<h2>New heading</h2>" );

В результате получается структура:

<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>

Все внутренние <div> элементы можно выбрать одновременно:

$( "div.inner" ).replaceWith( "<h2>New heading</h2>" );

Это приведет к замене всех из них:

<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

Элемент также можно выбрать в качестве замены:

$( "div.third" ).replaceWith( $( ".first" ) );

В результате получается структура DOM:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

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

Метод .replaceWith(), как и большинство методов jQuery, возвращает объект jQuery, чтобы на него можно было прицепить другие методы. Однако следует отметить, что возвращается исходный объект jQuery. Этот объект ссылается на элемент, который был удален из DOM, а не на новый элемент, который его заменил.

Дополнительные заметки:

Метод .replaceWith() удаляет все данные и обработчики событий, связанные с удаленными узлами.
До jQuery 1.9, .replaceWith() пытался добавить или изменить узлы в текущем наборе jQuery, если первый узел в наборе не был подключен к документу, и в этих случаях возвращал новый набор jQuery вместо исходного набора. Метод мог возвращать новый результат в зависимости от количества или подключенности своих аргументов! Начиная с jQuery 1.9, .after(), .before(), и .replaceWith() всегда возвращают исходный неизмененный набор. Попытка использовать эти методы с узлом без родителя не приводит к каким-либо изменениям — то есть ни набор, ни узлы, которые он содержит, не изменяются.

Примеры:

При нажатии, заменить кнопку на div с тем же словом.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  button {
    display: block;
    margin: 3px;
    color: red;
    width: 200px;
  }
  div {
    color: red;
    border: 2px solid blue;
    width: 200px;
    margin: 3px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>First</button>
<button>Second</button>
<button>Third</button>
 
<script>
$( "button" ).on( "click", function() {
  $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
</script>
 
</body>
</html>

Демо:

Заменить все абзацы жирными словами.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
</script>
 
</body>
</html>

Демо:

При нажатии, заменить каждый абзац на div, который уже есть в DOM и выбран с помощью функции $(). Обратите внимание, что он не клонирует объект, а перемещает его для замены абзаца.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  div {
    border: 2px solid blue;
    color: red;
    margin: 3px;
  }
  p {
    border: 2px solid red;
    color: blue;
    margin: 3px;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div>Replaced!</div>
 
<script>
$( "p" ).on( "click", function() {
  $( this ).replaceWith( $( "div" ) );
});
</script>
 
</body>
</html>

Демо:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  .container {
    background-color: #991;
  }
  .inner {
    color: #911;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>
  <button>Replace!</button>
</p>
<div class="container">
  <div class="inner">Scooby</div>
  <div class="inner">Dooby</div>
  <div class="inner">Doo</div>
</div>
 
<script>
$( "button" ).on( "click", function() {
  var $container = $( "div.container" ).replaceWith(function() {
    return $( this ).contents();
  });
 
  $( "p" ).append( $container.attr( "class" ) );
});
</script>
 
</body>
</html>

.replaceWith( newContent )Возвращает: jQuery

версия добавлена: 1.2.replaceWith( newContent )

версия добавлена: 1.4.replaceWith( function )

Дополнительные заметки:

Примеры:

Демо:

Демо:

Демо:

Демо: