插入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>

并让..box 1在..box 4之前使用JavaScript：

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>

但是，我最近从.lastElementChild. .s1中删除了..box 4，因此..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.box-1中简单地移动div不是一个选项。

注：Vanilla JavaScript only - No 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>

​