Обернуть html код в дополнительный div при перемещении с помощью .before js

Question

Есть код, который перемещает <div id="item_related_1"> и <div id="item_related_2"> перед вторым тегом <h2> на странице

jQuery(document).ready(function($) {
        // Переместить #item_related_1 и #item_related_2 
        // перед вторым <h2>
        
        $('h2:eq(1)').before($('#item_related_1 , #item_related_2')); 
        });

Подскажите пожалуйста, как дополнить этот простой код, чтобы обернуть эти два блока в один общий div и получить на выходе:

<div class="wrapper">
   <div id="item_related_1">...</div>
   <div id="item_related_2">...</div>
</div>

Answer 1

Можно что-то из этого сделать.. Соответственно строки надо упаковать в тело ready функции. Здесь они вынесены для просмотра результата

jQuery(document).ready(function($) {
  // Переместить #item_related_1 и #item_related_2 
  // перед вторым <h2>

  $('h2:eq(1)').before($('#item_related_1 , #item_related_2'));
});

//$(".wrapper").append($('#item_related_1 , #item_related_2'));// если див с классом wrapper существует в DOM
//console.log($('body').html())

div = $("<div class='wrapper'>").html($('#item_related_1 , #item_related_2'));// создать див с классом wrapper и вставить внутрь блоки с id #item_related_1 , #item_related_2

$("body").prepend(div);//вставить в тело html

console.log($('body').html())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item_related_1">...</div>
<div id="item_related_2">...</div>

БЛОГ НА HUSL

Обернуть html код в дополнительный div при перемещении с помощью .before js

Ответы (1 шт):