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 within one tag within another tag using JavaScript or jQuery. I want to find all elements with class name wpb_wrapper, then find all the tags within them, and wrap those tag groups in a separate tag within each wpb_wrapper, so that the child tag groups within each wpb_wrapper are still child elements, but wrapped in a tag inside rather than in a separate tag for every tag on the page. From this: to this: I tried

P粉659518294 · Answer

  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);


  Functional Experience

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.