javascript - 使用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 的 sibling 之间插入测试 div。我写的javascript失败了。谁能想到最好的方法吗？

感谢您的帮助 - 您可以在下面找到 codepen URL:

Codepen 网址:https://codepen.io/ns91/pen/XWWdjXx

Answer 1

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

five.parentNode.insertBefore(test, five);