Question

我有一个HTML格式的有序列表。

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

我想将js的新列表项添加到第三顺序。我怎么能这样做？

这是演示：http://jsbin.com/akahow/2/edit

更多信息：appendChild将新项目添加到列表末尾，我尝试insertBefore但失败了，只有我可以完成insertBefore将其添加到第一位地点。但我想把它放在第三位。

Answer 1

http://jsfiddle.net/k6xVc/

var paragraph = document.createElement("li");
var textNode = document.createTextNode("Third item");
paragraph.appendChild(textNode);
var list=document.getElementById("jack");
list.insertBefore(paragraph,list.childNodes[4]);

HTML：

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

Answer 2

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

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

然后您需要使用insertBefore将项目插入堆栈。但是，insertBefore需要引用您要插入节点的实际对象，而不是索引。在您的情况下，您需要添加以下行：

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

您可能会注意到我们必须使用第五个索引（[4]）将节点插入正确的位置。这是因为childNodes数组包括所有类型的节点，包括Text，Elements和Comments。

Answer 3

获取第二个<li>作为元素，并使用appendChild

附加到该元素

选中此DEMO

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

3 个答案: