用 CSS 重新排序 div？在父级 2 的子级之间插入父级 1答案

【问题标题】：Reorder divs with CSS? Insert parent 1 between children of parent 2用 CSS 重新排序 div？在父级 2 的子级之间插入父级 1
【发布时间】：2018-07-02 16:08:19
【问题描述】：

这就是我所拥有的：

<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 不动，只要它们以该顺序出现在页面上就完美了。

【问题讨论】：

两者都是可能的，但这取决于您要达到的目标。 JS 可以根据需要更改 html 结构。但是如果你只想要css，这取决于预期的输出
stackoverflow.com/questions/41424994/…

标签： javascript css flexbox

【解决方案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 只是为了更好看

【讨论】：

【解决方案2】：

使用 Javascript：

//Remove the parent 1 div from the container div
 document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);

//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

【讨论】：

【解决方案3】：

为了完成这项工作，我建议您删除子类周围的 div.parent2。因此代码变成了

<div class="container parent">
 <div clas="parent1"></div>
 <div class="child1"></div>
 <div class="child2></div>
</div>

那么你可以使用 flexbox 来做到这一点

.parent{display: flex};
.child1{order:1}
.parent1{order:2}

【讨论】：