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

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 不再 move/becomes 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 根据屏幕宽度改变位置，因此简单地将 div 移动到 HTML 不是一个选项。

注意：仅限香草 JavaScript - 无 jQquery。

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

Answer 1

要在没有 jQuery 的情况下插入 HTML，只需使用 insertAdjactedHTML 函数即可。 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 2

就用.appendChild?

const box1 = document.querySelector('.box-1');
const s1 = box1.parentElement;
box1.remove();
s1.appendChild(box1);

<div class="s1">
 <div class="box-1">b1</div>
 <div class="box-2">b2</div>
 <div class="box-3">b3</div>
 <div class="box-4">b4</div>
</div>

Answer 3

下面会将 box1 添加为最后一个子项（自动将其从原始位置移除）。

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

s1.appendChild(box1);

Insert div as the .lastElementChild without 'insertBefore' without jQuery