如何将特定的 div 放在其他 div 之前?

Question

我有一个情况，我需要在<div id="content2">之前放置<div id="content1">，但<div id="content2">在另一个div中，所以带有推拉的css在这里不起作用。 这是我的HTML结构：

<div class="col span_3_of_4">
<div class="col span_3_of_4">
<h1 class="title">Title</h1>
</div>
<div class="col span_1_of_4">
<div class="fr">
<a href="/" class="pdfgen funcicons" target="_blank"></a>
<a href="/" class="print funcicons"></a>
<a href="/" class="tsign funcicons"></a>
</div>
</div>
<div class="cl"></div>
<div class="divider"></div>
<div class="formatedtext text">
<div id="content2">
<p>Content that needs to below content2 id</p>
</div>
</div>
<div id="content1">
<div class="col span_1_of_3 mlfix">
<div id="datepick"></div>
</div>
<div class="col span_2_of_3"></div>
</div>
<div class="cl"></div>
<div class="divider"></div>
</div>

如何在<div id="content2"></div>之前放置整个<div id="content1"></div>？欢迎任何好的例子或肮脏的例子。

Answer 1

您可以使用Node.insertBefore.我们必须针对content2的父级，插入content1，并再次使用content2作为参考点：

const content1 = document.getElementById('content1')
const content2 = document.getElementById('content2')
content2.parentNode.insertBefore(content1, content2)

<div class="col span_3_of_4">
<div class="col span_3_of_4">
<h1 class="title">Title</h1>
</div>
<div class="col span_1_of_4">
<div class="fr">
<a href="/" class="pdfgen funcicons" target="_blank"></a>
<a href="/" class="print funcicons"></a>
<a href="/" class="tsign funcicons"></a>
</div>
</div>
<div class="cl"></div>
<div class="divider"></div>
<div class="formatedtext text">
<div id="content2">
<p>Content 2</p>
</div>
</div>
<div id="content1">
<div class="col span_1_of_3 mlfix">
<div id="datepick">Content 1</div>
</div>
<div class="col span_2_of_3"></div>
</div>
<div class="cl"></div>
<div class="divider"></div>
</div>

请注意，我添加了一些文本，以更清楚地表明节点实际上已经移动。

Answer 2

如果你在<div class="formatedtext text">之前有#content1就可以了，你可以使用弹性框。

在父<div class="col span_3_of_4">上，或者您可以包装<div class="formatedtext text">和<div id="content1">并在其上使用display: flex;。

然后在元素<div class="formatedtext text">上使用专有order并给出值 2，因此它将放在<div id="content1"></div>

之后下面是一个示例：https://jsfiddle.net/uvkdabor/1/