jQueryのappendを使ってulの中に入れ子でliを追加する方法

デモ

appendでネストさせるやり方

完成イメージ

<div>
    <ul>
        <li>sample text</li>
    </ul>
</div>

ulの中にliが入って入れ子(ネスト)状態になることを目指す。

html,cssの準備

<div></div>

div要素だけ書いておく。

div ul{
    height:20px;
    background:#888;
}

div > li{/*入れ子失敗*/
    color:red;
}

div ul > li{/*入れ子成功*/
    color:white;
}

入れ子ができたら、テキストが白となる。
入れ子が失敗したら、テキストが赤となる。

入れ子失敗例

$("div").append("<ul>").append("<li>test1</li>");

appendしてから、おしりにまたappendを書く。

<div>
    <ul>
    </ul>
　　<li>sample text</li>
</div>

そうすると、ulとliが同階層に生成されて失敗する。

$("div").append("<ul/>").append("<li>test2</li>");

本来appendには閉じタグを省略してもよいことになっている。古いバージョンによっては閉じタグもいるので、このような書き方もできる。ちょっと説明に自信がないので、詳しくはわからなかった。

$("div").append("<ul/>","<li>test3</li>");

引数を追加することもできるが、この場合もulとliは同階層に配置される。

入れ子成功例

var nesting = $("<ul>").append("<li>test4</li>");
$("div").append(nesting);

入れ子にさせるためには、ulにliをappendする。それからdivにappendすればよい。