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すればよい。