<p>我正在尝试使用JavaScript或jQuery将所有<span>标签包装在一个</span></p><div>标签中的另一个<div>标签中。我想要找到所有具有类名为<code>wpb_wrapper</code>的元素，然后在其中查找所有的<span>标签，并将这些<span>标签组包装在每个<code>wpb_wrapper</code>中的一个单独的<div>标签中，以便每个<code>wpb_wrapper</code>中的子<span>标签组仍然是子元素，但是包装在内部的一个<div>标签中，而不是在页面上的每个<span>标签中都包装在一个单独的<div>标签中。<p><br /></p> <p>从这个：</p> <pre class="brush:php;toolbar:false;">&lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt;</pre> <p>变成这个：</p> <pre class="brush:php;toolbar:false;">&lt;div class="wpb_wrapper"&gt; &lt;div class=""&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;div class=""&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;div class=""&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>我尝试过这个，但它仍然只是抓取所有<code>wpb_wrapper</code>中的<span>标签，并将其包装在第一个<code>wpb_wrapper</code>中的一个单独的</span></p><div>标签中<p><br /></p> <pre class="brush:php;toolbar:false;">jQuery('.wpb_wrapper').each(function(){ jQuery(this).find('span').wrapAll('&lt;div class=""/&gt;'); });</pre> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery('.wpb_wrapper').each(function() { jQuery(this).find('span').wrapAll('&lt;div class=""/&gt;'); }); console.log(document.body.innerHTML);</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.wpb_wrapper { border: 1px solid; } .wpb_wrapper &gt; div { border: 1px dotted red; } .wpb_wrapper &gt; div &gt; span { border: 1px dashed blue; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;0&lt;/span&gt; &lt;span class=""&gt;0&lt;/span&gt; &lt;span class=""&gt;0&lt;/span&gt; &lt;span class=""&gt;0&lt;/span&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;1&lt;/span&gt; &lt;span class=""&gt;1&lt;/span&gt; &lt;span class=""&gt;1&lt;/span&gt; &lt;span class=""&gt;1&lt;/span&gt; &lt;/div&gt; &lt;div class="wpb_wrapper"&gt; &lt;span class=""&gt;2&lt;/span&gt; &lt;span class=""&gt;2&lt;/span&gt; &lt;span class=""&gt;2&lt;/span&gt; &lt;span class=""&gt;2&lt;/span&gt; &lt;/div&gt;</code></pre> <p><br /></p></div></div></span></div></span></div></span></span></div></div>

  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>