add ul to a li element in an existing ul

Question

i need to add a sub ul to a existing list inside a ul.

i have a existing ul like this

 <li id="0" class="dropdown"> <a href="#">Articles</a> </li>
<li id="1" class="dropdown"> <a href="#">Global</a> </li>
<li id="2" class="dropdown open"> <a href="#" class="dropdown-toggle" data-   toggle="dropdown">Commodities <b class="caret"></b></a></li>
<li id="3" class="dropdown"> <a href="#">Mergers</a> </li>
<li id="4" class="dropdown"> <a href="#">Dividend</a> </li>
<li id="5" class="dropdown"> <a href="#">Tech</a> </li></ul>

this list is created dynamically, i need to append a ul to the third li, ie,

<li id="2" class="dropdown open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Commodities <b class="caret"></b></a>
<ul>
  something.....

how is this possible??

Answer 1

Firstly don't define the id starting with number.

Then, you can use append like this:

$('li#third').append('ul');

Or, like this:

$('<ul />').appendTo('li#third');

Go thorough the api for more information.

Answer 2

This is solely JavaScript solution:

function add_ul()
{
    var li = document.getElementById("li");
    var ul = document.createElement("ul");
    ul.appendChild(document.createTextNode("Another UL Element"));
    li.appendChild(ul);
}

Answer 3

You can use .append() or appendTo()

 $('.open').append("<ul id='subul'>sub</ul>");

if sub ul element already exists in dom then:

 $('#subul').appendTo('.open');