Javascript 如何在js中将节点附加到首选位置

我有一个HTML的有序列表

<ol class="btns">
  <li>First item</li>
  <li>Second item</li>
  <!--Third one goes here-->
  <li>Four item</li>
</ol>

第一项
第二项
四项

我想在第三顺序中添加一个带有js的新列表项。我该怎么做

下面是演示：

更多信息：

appendChild

将新项目添加到列表末尾，我尝试了

insertBefore

但失败，只有

insertBefore

将其添加到第一位。但我想把它放在第三位。

HTML:

第一项
第二项
四项

您的第一个问题是使用了

GetElementsByCassName

，它返回一个节点数组，即使该数组只包含一个节点。如果您完全确定该类中只有一个元素，则应将该行更改为：

var findmenu = document.getElementsByClassName("btns")[0];

然后需要使用

insertBefore

将项目插入堆栈。但是，

insertBefore

需要引用要插入节点的实际对象，而不是索引。在您的情况下，您需要添加以下行：

findmenu.insertBefore(paragraph,findmenu.childNodes[4]);

---

您可能会注意到，我们必须使用第五个索引（

[4]

）将节点插入正确的位置。这是因为

childNodes

数组包含所有类型的节点，包括文本、元素和注释

获取第二个

作为元素，并使用

appendChild

---

检查此链接

尝试此链接，id不应以数字开头。@杰克可以，但在HTML5中可以。。。这只是个例子，最好还是避免，即使是例子。谢谢你的全面解释。是否可以消除其他类型的节点。

var findmenu = document.getElementsByClassName("btns")[0];

findmenu.insertBefore(paragraph,findmenu.childNodes[4]);