使用 javascript 在特定元素之后插入 div 的最佳方法

Question

我正在尝试发现在特定元素之后插入元素(在本例中为#test(以成为其同级元素的最佳方法。举个例子：

该 HTML：

<div id='parent'>
<div class='child' id='one'>
child 1
</div>
<div class='child' id='two'>
child 2
</div>
<div class='child' id='three'>
child 3
</div>
<div class='child' id='four'>
child 4
</div>
<div class='child' id='five'>
child 5
</div>
</div>
<div id='test'>test</div>

Javascript：

const test = document.getElementById('test');
test.parentNode.appendChild(test);
// how to insert #test after #four and before #five

我希望能够在 id 为 4 和 5 的兄弟姐妹之间插入测试div。我写的 JavaScript 失败了。谁能想到最好的方法？

感谢您在这里提供任何帮助 - 您可以在下面找到代码笔 URL：

代码笔网址：https://codepen.io/ns91/pen/XWWdjXx

Answer 1

const test = document.getElementById('test');
const five = document.getElementById('five');
five.parentNode.insertBefore(test, five);

Answer 2

您可以使用insertBefore

let tst = document.getElementById('test');
var fifthChild = document.getElementById('five');
document.getElementById('parent').insertBefore(tst, fifthChild);

<div id='parent'>
<div class='child' id='one'>
child 1
</div>
<div class='child' id='two'>
child 2
</div>
<div class='child' id='three'>
child 3
</div>
<div class='child' id='four'>
child 4
</div>
<div class='child' id='five'>
child 5
</div>
</div>
<div id='test'>test</div>