How do dynamically generate this kind of nested li objects using javascript/jquery? : <p>I want to dynamically generate following kind of nested li objects in my jsp. How Should I do this. I am unable to solve by using simple document.createElement("LI"); and appendElement as I also want to add class to that elements.</p>

<pre><code>&lt;li class="level1"&gt;
                            &lt;div class="thumb"&gt;
                                &lt;a href="detail.html#"&gt;&lt;img src="images/comments1.gif"
                                    alt="" /&gt;&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="desc"&gt;
                                &lt;div class="commentlinks"&gt;
                                    &lt;a href="detail.html#" class="reply"&gt;Reply&lt;/a&gt; &lt;a
                                        href="detail.html#" class="like"&gt;Like&lt;/a&gt; &lt;a
                                        href="detail.html#" class="dislike"&gt;Dislike&lt;/a&gt;
                                &lt;/div&gt;
                                &lt;h5&gt;
                                    &lt;a href="detail.html#" class="colr"&gt;By MySebbb:&lt;/a&gt;
                                &lt;/h5&gt;
                                &lt;p class="time"&gt;7 months ago&lt;/p&gt;
                                &lt;div class="clear"&gt;&lt;/div&gt;
                                &lt;p class="txt"&gt;Lorem ipsum dolor sit amet, consectetuer
                                    adipiscing elit. Sed elit. Nulla sem risus, vestibulum in,
                                    volutpat eget, dapibus ac, lectus. Curabitur dolor sapien.&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
</code></pre>
