Wie kann ich mithilfe von JavaScript oder jQuery eine Reihe von HTML-Elementen in ein übergeordnetes HTML-Element einschließen und sie in jedem übergeordneten Element behalten?

Question

Ich versuche, alle -Tags mithilfe von JavaScript oder jQuery in ein

-Tag zu packen. Ich möchte alle Elemente mit dem Klassennamen wpb_wrapper finden, dann alle -Tags darin finden und diese -Tag-Gruppen in ein separates div>-Tag innerhalb von wpb_wrapper, sodass jede Gruppe von untergeordneten -Tags immer noch ein untergeordnetes Element ist, jedoch in ein

-Tag eingeschlossen ist -Tag in einem separaten

-Tag.

Davon:

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

Änderungen daran:

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

Ich habe es versucht, aber es erfasst immer noch alle wpb_wrapper und verpackt sie in einem separaten wpb_wrapper /span>

tag

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 gestricheltes Blau }</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>

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