How to append a node to preferred place in js

Question

I have an ordered list in HTML.

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

I want to add a new list item with js into third order. How can I do that?

Here's demo: http://jsbin.com/akahow/2/edit

More info: appendChild adds new item to end of list, I tried insertBefore but failed, only I could done with insertBefore adding it to first place. But I want to put it third place.

Try this link http://stackoverflow.com/questions/7258185/javascript-append-child-after-element — Bhavik Shah, Dec 26 '12 at 13:15

score 2 · Accepted Answer · answered Dec 26 '12 at 13:28

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>

answered Dec 26 '12 at 13:28

Muhammad Talha Akbar

9,952
6
38
62

1

An id shouldn't start with a number. – Ja͢ck Dec 26 '12 at 13:30
@Jack ok but in HTML5 it's ok... and that was only example – Muhammad Talha Akbar Dec 26 '12 at 13:31
It's still better avoided, even for examples. – Ja͢ck Dec 26 '12 at 13:35

score 1 · Answer 2 · answered Dec 26 '12 at 13:31

Your first problem is that you've used getElementsByClassName, which returns an array of nodes, even if the array only contains one node. If you are absolutely sure that there is one and only one element with that class, you should change the line to:

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

Then you need to use insertBefore to insert the item into the stack. However, insertBefore requires a reference to the actual object in front of which you want to insert your node, not the index. In your case, you'd add the line:

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

You may notice that we had to use the fifth index ([4]) to insert the node into the correct place. This is because the childNodes array includes all types of nodes, including Text, Elements and Comments.

Thanks for comprehensive explanation. Is it possible to eliminate other types of nodes. — Imrahil, Dec 26 '12 at 13:58

rahul · Answer 3 · 2012-12-26T16:15:01.793

0

Get 2nd <li> as element and append to that by using appendChild

Check this DEMO

edited Dec 26 '12 at 16:15

answered Dec 26 '12 at 13:41

rahul

100
8

How to append a node to preferred place in js

3 Answers3