jQuery созданный элемент с insertAfter не работает

Question

На странице есть несколько div с классом "wrap-me".

Я хочу добавить элемент «add-me» после «wrap-me» и дважды обернуть их в «wrapper-inner» и «wrapper».

По сути - это должновыглядеть так:

<div class="wrapper">
    <div class="wrapper-inner">
        <div class="wrap-me"></div>
        <div class="add-me"></div> 
    </div>
</div>

Это моя реализация:

const $addMe = $("<div>", { class: "add-me" });
const $wrapper = $('<div>', { class: "wrapper" });
const $wrapperInner = $('<div>', { class: "wrapper-inner" });

$.each($(".wrap-me"), (i, wrapMe) => {
    const $wrapMe = $(wrapMe);

    $wrapMe.wrap($wrapper).wrap($wrapperInner);
    $addMe.insertAfter($wrapMe);
});

Вот вывод:

<div class="wrapper">
    <div class="wrapper-inner">
        <div class="wrap-me"></div>
    </div>
</div>

Это почти там, единственное, что«add-me» не вставляется в DOM.Что не так?

Answer 1

//get the template
var wrapperTemplate = $('#wrapperTemplate').text();

$('.wrap-me').each(function(index, element){
  //create a new element to put in the DOM
  var $wrapper = $(wrapperTemplate);
  
  //put the wrapper after the element we are going to replace
  $wrapper.insertAfter(element);
  //move the element into the wrapper where it should be
  $wrapper.find('.wrapper-inner').prepend(element);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-me">A</div>
<div class="wrap-me">B</div>
<div class="wrap-me">C</div>
<div class="wrap-me">D</div>

<!-- HTML template for what we want to add, so it's not in the javascript -->
<script type="text/html" id="wrapperTemplate">
  <div class="wrapper">
      <div class="wrapper-inner">
          <div class="add-me"></div> 
      </div>
  </div>
</script>