Comment puis-je envelopper un ensemble d'éléments HTML dans un élément HTML parent à l'aide de JavaScript ou de jQuery et les conserver dans chaque élément parent ?

Question

J'essaie d'envelopper toutes les balises dans une balise

dans une autre balise

Je souhaite rechercher tous les éléments portant le nom de classe wpb_wrapper, puis rechercher toutes les balises qu'ils contiennent et envelopper ces groupes de balises div> dans wpb_wrapper afin que chaque groupe de balises enfants dans wpb_wrapper soit toujours un élément enfant, mais enveloppé dans une balise

dans une balise

distincte sur la page.

À partir de ceci :

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

Modifications apportées à ceci :

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

J'ai essayé ceci, mais il récupère toujours toutes les balises dans wpb_wrapper et les enveloppe dans le premier wpb_wrapper /span>

tag

jQuery('.wpb_wrapper').each(function(){
    jQuery(this).find('span').wrapAll('<div class=""/>');
});</pré>
<p><br /></p>
<pre class="snippet-code-js lang-js Prettyprint-override"><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 { bordure : 1px pointillé rouge }
.wpb_wrapper > div > span { bordure : 1px en pointillé bleu }</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>

Très simple, nous ajoutons simplement l'élément span à l'élément div nouvellement créé. Cependant, le problème est que nous supposons que nous l'ajoutons à la fin de wgb_wrapper.