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-1移动到.box-4之前：

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不再移动/成为.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。

注意：只有香草 JavaScript - 没有 jQquery。

在此先感谢各位，非常感谢！

Answer 1

下面将附加 box1 作为最后一个孩子（自动将其从原始位置删除）。

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

s1.appendChild(box1);

Answer 2

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

Answer 3

只用.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>