如何將節點追加到js中的首選位置

我在HTML中有一個有序列表。如何將節點追加到js中的首選位置

<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將它添加到第一個地方完成。但我想把它放在第三位。

來源

2012-12-26 Imrahil

追加到嘗試此鏈接http://stackoverflow.com/questions/7258185/javascript-append-child-after-element –

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-26 13:28:26

一個ID不應該以數字開頭。 –

謝謝，效果很好。 – Imrahil

@Jack確定，但是在HTML5中沒關係......這僅僅是一個例子 –

你的第一個問題是，你使用getElementsByClassName，它返回一個節點數組，即使該數組只包含一個節點。如果你有絕對的把握，有一個且只有一個與該類元素，你應該改變行：

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

然後，你需要使用insertBefore到項目插入到堆棧。但是，insertBefore需要參考要插入節點的實際對象，而不是索引。在你的情況，你會添加一行：

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

您可能注意到，我們不得不使用第五指數（[4]）到節點插入到正確的位置。這是因爲childNodes數組包含所有類型的節點，包括文本，元素和註釋。

來源

2012-12-26 13:31:39

感謝您的全面解釋。是否有可能消除其他類型的節點。 – Imrahil

獲取儘可能元素第二<li>和使用appendChild

入住這DEMO

來源

2012-12-26 13:41:15 rahul

這是不對的。它在li元素中放置了一個新的li元素。 – Imrahil

哦，它的錯誤！讓我更新。 – rahul

如何將節點追加到js中的首選位置

回答

相關問題