How can I wrap a set of HTML elements within a parent HTML element using JavaScript or jQuery and keep them within each parent element?

Question

I'm trying to wrap all tags in one

tag inside another

tag using JavaScript or jQuery. I want to find all elements with class name wpb_wrapper, then find all tags in them, and wrap these tag groups inside each in a separate

tag within wpb_wrapper so that each group of child tags within wpb_wrapper is still a child element, but wrapped inside a < ;div> tags, rather than wrapping each tag in a separate

tag on the page.

From this:

<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>
<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>
<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>

Changes to this:

<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>
<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>
<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>

I tried this, but it still just grabs all the tags in wpb_wrapper and wraps it in the first wpb_wrapper in a separate

tag

jQuery('.wpb_wrapper').each(function(){
    jQuery(this).find('span').wrapAll('<div class=""/>');
});

<code>jQuery('.wpb_wrapper').each(function() {
  jQuery(this).find('span').wrapAll('<div class=""/>');
});
console.log(document.body.innerHTML);</code>

<code>.wpb_wrapper { border: 1px solid; }
.wpb_wrapper > div { border: 1px dotted red; }
.wpb_wrapper > div > span { border: 1px dashed blue; }</code>

<code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/ jquery.min.js"></script>
<div class="wpb_wrapper">
  <span class="">0</span>
  <span class="">0</span>
  <span class="">0</span>
  <span class="">0</span>
</div>
<div class="wpb_wrapper">
  <span class="">1</span>
  <span class="">1</span>
  <span class="">1</span>
  <span class="">1</span>
</div>
<div class="wpb_wrapper">
  <span class="">2</span>
  <span class="">2</span>
  <span class="">2</span>
  <span class="">2</span>
</div></code>

Answer 1

  const wrapper = document.querySelector('.wpb_wrapper');
  const spans = wrapper.querySelectorAll('span');

  const customDiv = document.createElement('div');
  customDiv.classList.add('custom-div');

  spans.forEach(span => {
    customDiv.appendChild(span);
  });

  wrapper.appendChild(customDiv);

<div class="wpb_wrapper">
  <h2><img decoding="async" class="alignnone size-full wp-image-9244" src="icon-briefcase.svg" alt="" width="24" height="24">Functional Experience</h2>
  <p></p>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>

Very straightforward, we just append the span element to the newly created div element. However, the problem is that we assume we append it to the end of wgb_wrapper.