2

我在 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将它添加到第一位。但我想把它放在第三位。

4

3 回答 3

2

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>
于 2012-12-26T13:28:26.447 回答
1

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

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

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

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

您可能注意到我们必须使用第五个索引 ( [4]) 将节点插入到正确的位置。这是因为该childNodes数组包含所有类型的节点，包括文本、元素和注释。

于 2012-12-26T13:31:39.730 回答
0

获取第二个<li> 作为元素并通过使用附加到该元素appendChild

检查此演示

于 2012-12-26T13:41:15.923 回答