Is there any method/way in javascript to add a child node to list element dynamically?

Question

If I have an unordered list like

<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>

I want to add a sublist item to it dynamically. Is there any method in javascript to do that. How could I do it. edit I need an item at next level, i.e. a sub list of Helo World that I mentioned in OP too, something like as under. One more issue here is that I need the items to be a permanent part of my code.

 <ul id="list">
    <li>Helo World-1</li>
    <li>Helo World-2</li>
    <li>Helo World-3</li>
       <ul>
         <li>One</li>
         <li>Two</li>
      </ul>
 </ul> 

Solution 1

Using pure DOM methods:

var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));

To add the list item to the end of the list:

ul.appendChild(li);

To insert the list item between existing list items (note you'd have to give the existing list item an id in this example):

ul.insertBefore(li, document.getElementById("list_item_id"));

Update

If you want to add a nested list, you'll need to add it to a list item rather than directly inside the list in order for it to be valid:

var lis = ul.getElementsByTagName("li");

var lastLi = lis[lis.length - 1];

var nestedUl = document.createElement("ul");
var nestedLi = nestedUl.appendChild(document.createElement("li"));
nestedLi.appendChild(document.createTextNode("One"));

lastLi.appendChild(nestedUl);

Solution 2

I've created a sample in jsfiddle

var el = document.getElementById("list");

var li = document.createElement("li");
li.innerHTML = "item";

el.appendChild(li);

You can go through the w3schools html dom reference to see how we can manipulate the html elements using javascript.

But I think the cleaner way will be to use a third party library like jQuery which will allow a much easier way to manipulate the dom.

ex: If use jQuery this will be as easy as

$("<li>...</li>").appendTo("#list")

EDIT: Based on your edit you can try this,

var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";

This will get the 3rd <li> of the <ul> and add a sublist to it

Comments

[Nick Craver]

This is a very bad way to do it, .innerHTML will erase all event handlers and cause other issues.

[user113716]

Nice insertBefore inclusion. +1

[XCeptable]

thanX Arun, what I need is a sublevel list to Helo world. I added detail to my question.

[XCeptable]

thanX Tim but same thing is here. Its adding item on 1st level, I need sub level item added.

[XCeptable]

thanX a Lot Tim. Can you kindly put all code together that is needed to add nested list item. Bec I am not sure how should I merge this code with one you put earlier as you used tagName property of element that is crated in code snippet.

[Tim Down]

@YuriKolovsky: Not in this situation: creating an element and all its children before adding it to the DOM is as good as you can do. A DocumentFragment would only help if you were inserting several sibling elements at the same point in the DOM.

[Chris Ji]

This does not work. last call lastLi.appendChild(nestedUl) will fail. jsfddler

[Tim Down]

@ChrisJi: No, it works fine. The problem in your jsFiddle is that you missed out the the line that declares the ul variable. See jsfiddle.net/DFHWd/222