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

Posted 2023-02-21

【中文标题】使用javascript在特定元素之后插入div的最佳方法[重复]

【英文标题】：The best way of inserting a div after a specific element with javascript [duplicate]

【发布时间】：2020-02-11 06:47:32

【问题描述】：

我正在尝试发现在特定元素之后插入元素（在本例中为#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 失败了。谁能想到最好的方法？

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

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

【问题讨论】：

MDN insertAdjacentElement 也是一个选项。

【参考方案1】：

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

five.parentNode.insertBefore(test, five);

【参考方案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>