javascript/jqueryを使用してこの種のネストされたliオブジェクトを動的に生成するにはどうすればよいですか？

Question

私は、以下の種類のネストされたliオブジェクトを自分のJSPに動的に生成したいと考えています。どのように私はこれを行う必要があります。単純なdocument.createElement（ "LI"）を使用して解決できません。また、その要素にクラスを追加したいので、appendElementを追加してください。 jQueryので

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

Answer 1

、あなたが行うことができます：あなたはすべてのあなたのhtmlを追加することができますliインサイド

$('<li class="level1"></li>').appendTo('ul');

を。

Answer 2

最初に、あなたのJSコードには、var list = '<li>your code inside list</li>'のような変数に文字列としてHTML全体が格納されています。

$('selector').append(list); 

このステートメントをforループで使用して、リストを複数回追加することができます。これがあなたが探していたものだと願っています。 ここにはdemoの例があります。