如何使用JavaScript或jQuery将一组HTML元素包裹在一个父HTML元素中，并使它们保持在每个父元素内？

Question

我正在尝试使用JavaScript或jQuery将所有标签包装在一个

标签中的另一个

标签中。我想要找到所有具有类名为wpb_wrapper的元素，然后在其中查找所有的标签，并将这些标签组包装在每个wpb_wrapper中的一个单独的

标签中，以便每个wpb_wrapper中的子标签组仍然是子元素，但是包装在内部的一个

标签中，而不是在页面上的每个标签中都包装在一个单独的

标签中。

从这个：

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

变成这个：

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

我尝试过这个，但它仍然只是抓取所有wpb_wrapper中的标签，并将其包装在第一个wpb_wrapper中的一个单独的

标签中

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></代码>

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>

非常直接，我们只需将span元素附加到新创建的div元素中。然而，问题在于我们假设将其附加到wgb_wrapper的末尾。