How to Use DOM to Dynamically Populate Nested Lists
- 1). Link to the jQuery framework. For example, this call to the Google API will embed a recent version of jQuery into your website.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> - 2). Write your HTML code with a list container. Assign the container with an identity or a class. In this example code, a new list has been created. This example code create a new list element, assigns the list with the identity of yourList and places the list into a parent div with an identity of parentDIV.
<div>
<ul>
</ul>
</div> - 3). Populate the yourList list DOM element with a new list item. You can do this by using jQuery's .prependTo() method. In the following sample jQuery code, jQuery has been called with the jQuery $ sign. The list item "This is a dynamically populated list item" will be attached to a list with the identity of yourList.
$('<li>This is a dynamically populated list item</li>').prependTo('#yourList');
Source...