javascript - 插入 div 作为 .lastElementChild 没有 'insertBefore' 没有 jQuery

Question

好吧，我通常将 .box-4 作为 .s1 中的最后一个元素，如下所示:

<div class="s1">
 <div class="box-1"></div>
 <div class="box-2"></div>
 <div class="box-3"></div>
 <div class="box-4"></div>
</div>

并使用 JavaScript 在 .box-4 之前移动 .box-1:

var box1 = document.querySelector('.box-1');
var s1 = box1.parentNode;

s1.insertBefore(box1, s1.lastElementChild);

得到以下结果:

<div class="s1">
 <div class="box-2"></div>
 <div class="box-3"></div>
 <div class="box-1"></div>
 <div class="box-4"></div>
</div>

但是，我最近从 .s1 中删除了 .box-4，因此 .box-1 不再移动/成为 < strong>the .lastElementChild. 我仍然希望 .box-1 移动，因此成为最后一个，但是，我不确定什么命令会做到这一点；最好是这样的

.insertAs(box1, s1.lastElementChild);

实现这一目标:

<div class="s1">
 <div class="box-2"></div>
 <div class="box-3"></div>
 <div class="box-1"></div>
</div>

注意:.box-1 根据屏幕宽度改变位置，因此简单地移动 HTML 中的 div 不是一个选项。

注意:仅限 Vanilla JavaScript - 无 jQquery。

在此先感谢大家，非常感谢!

Answer 1

下面会将 box1 添加为最后一个子节点(自动将其从原始位置移除)。

var box1 = document.querySelector('.box-1');
var s1 = box1.parentNode;

s1.appendChild(box1);