如何将具有类的所有元素移到具有类的元素之后

Question

提琴：http://jsfiddle.net/sgnmb6uL/

HTML：

<div class="main">
  <div>
    <div class="hdr">
      Your Items
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
  </div>
</div>

我创建了一个脚本，该脚本能够使用newItem类从已经生成的子div中添加新类。我根据文本分配了item和item2。

现在如何使用纯JS将item2类下的hdr类的所有元素移到<div class="main"> <div> <div class="hdr"> Your Items </div> <div class="newIt item2"> item2 </div> <div class="newIt item2"> item2 </div> <div class="newIt item"> item </div> <div class="newIt item"> item </div> <div class="newIt item"> item </div> </div> </div> 类的下面。

所以最终的html看起来像这样：

dateperiod

Answer 1

选择.hdr之后，迭代.item2，然后使用insertBefore将它们分别放在.hdr之后（在之前插入 .hdr的下一个兄弟姐妹，相当于在.hdr之后插入：

const hdr = document.querySelector('.hdr');
const parent = hdr.parentElement;
document.querySelectorAll('.item2').forEach((item2) => {
  parent.insertBefore(item2, hdr.nextSibling);
});

<div class="main">
  <div>
    <div class="hdr">
      Your Items
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
  </div>
</div>

要将.item2放在父级的开头，请在父级的第一个孩子上使用insertBefore：

const parent = document.querySelector('.main div');
document.querySelectorAll('.item2').forEach((item2) => {
  parent.insertBefore(item2, parent.children[0]);
});

<div class="main">
  <div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2
    </div>
  </div>
</div>

要保留顺序，也许选择第一个非{item2，然后insertBefore该元素：

const parent = document.querySelector('.main div');
const firstNonItem2 = parent.querySelector(':not(.item2)');
document.querySelectorAll('.item2').forEach((item2) => {
  parent.insertBefore(item2, firstNonItem2);
});

<div class="main">
  <div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2 first
    </div>
    <div class="newIt item">
      item
    </div>
    <div class="newIt item2">
      item2 second
    </div>
  </div>
</div>