jQueryでappend関数を使ってDOM要素をネストする正しいやり方

jQueryでappend関数を使ってDOM要素をネストする正しいやり方

append関数を使ってDOM要素をネスト

以下の書き方だと、

$('<div>').append('<ul>').append('<li>')

こうなってしまうので、

<div>
  <ul></ul>
  <li></li>
<div>

こう書くのが正しい。

$('div').append($('<ul/>').append('<li/>'));
// 結果
// <div>
//   <ul>
//     <li></li>
//   </ul>
// </div>

以下のように書くのは正しくない。

$('<div>').append($('<ul>').append('<li>'))
// 結果
// <div></div>

正しいサンプル

正しくないサンプル