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

我试图找到在特定元素之后插入元素（在本例中为

#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>

我希望能够在ID为4和5的兄弟姐妹之间插入测试div。我编写的javascript失败了。有人能想出最好的办法吗

感谢您在此提供的帮助-您可以在下面找到代码笔URL：

代码笔URL:

您可以使用

let tst=document.getElementById（'test'）；
var fifthChild=document.getElementById（'five'）；
document.getElementById（'parent'）.insertBefore（tst，第五个子项）

儿童1
儿童2
儿童3
儿童4
儿童5
测试
您可以使用


let tst=document.getElementById（'test'）；
var fifthChild=document.getElementById（'five'）；
document.getElementById（'parent'）.insertBefore（tst，第五个子项）

儿童1
儿童2
儿童3
儿童4
儿童5
测试
也是一个选项。这也是一种选择。
const test = document.getElementById('test');

test.parentNode.appendChild(test);
// how to insert #test after #four and before #five

const test = document.getElementById('test');
const five = document.getElementById('five');

five.parentNode.insertBefore(test, five);