如何使用JavaScript或jQuery將一組HTML元素包裹在一個父HTML元素中，並使它們保持在每個父元素內？

Question

我正在嘗試使用JavaScript或jQuery將所有標籤包裝在一個

標籤中的另一個

標籤中。我想要找到所有具有類別名稱為wpb_wrapper的元素，然後在其中找到所有的標籤，並將這些標籤組包裝在每個 wpb_wrapper中的一個單獨的

標籤中，以便每個wpb_wrapper中的子標籤組仍然是子元素，但是包裝在內部的一個< ;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">
  <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的末尾。