将div作为.lastElementChild插入而不使用＆＃39; insertBefore＆＃39;没有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> .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作为最后一个子项追加（自动将其从原始位置移除）。

SELECT `id_start_odon` FROM `start_odon`WHERE `id_pasien` = `$id_pasien` order by `created_at` DESC limit 1

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>