javascript - 用 CSS 重新排序 div？在父 2 的子之间插入父 1

Question

这是我的:

<div class="container>
    <div class="parent1"></div>
    <div class="parent2">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</div>

这就是我想要的:

<div class="container>
    <div class="parent2">
         <div class="child1"></div>
              <div class="parent1"></div>
         <div class="child2"></div>
    </div>
</div>

仅使用 CSS 或 JavaScript(不使用 jQuery)是否可行？即使 HTML 没有移动，只要它们以该顺序出现在页面上就是完美的。

Answer 1

您可以使用 Javascript 实现:document.querySelector('.child1').appendChild(document.querySelector('.parent1'));

演示:

function reorder() {
  document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}

.container * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
.parent1 {
  color: red;
  border-color: red;
}
.child1 {
  color: blue;
  border-color: blue;
}

<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
    I'm parent 2!
         <div class="child1 ">I'm child 1!</div>
         <div class="child2 ">I'm child 2!</div>
    </div>
</div>
<button onclick='reorder();'>Reorder!</button>

注意:CSS只是为了更好看