だから私が持っていると言います：
$('#content').append('<div id="groups" style="width: 300px; background-color: #888;"><ul class="leftnav" style="list-style-type: none;">');
ただし、スタイルが正しくなく、クラスもスタイル自体も機能しません。私がやったように見えます:
$('#content').append('<div id="groups"><ul>');
:hover イベントなどがあるため、 style="" を使用する代わりに、クラスのスタイリングを機能させることをお勧めします
作成したコードは、空の UL のみを含む DIV を追加します。この要素には高さがないため、背景色は表示されません。リスト項目がないため、スタイルlist-style-type: none;も表示されません。
リストにアイテムを追加する場合、指定したスタイルが適用されます。
ただし、HTML テキストの断片だけでなく、実際の DOM ノードappendが挿入されることに注意してください。つまり、開始タグだけでなく、実際の DIV になります。$('<div>')
タグがドキュメント内で開いたままになると予想される場合は、何らかの#content 方法でこの方法で要素を追加することができますが、要素が の外側に追加されていることがわかります#groups(グループは UL の直後に閉じられるため)。 )、スタイルは適用されません。
divの高さを設定する
height:100px; // You will see the difference
// as the UL is currently empty
set the heightdiv は静的であり、内部のコンテンツは空であるため、必要があります。
終了タグを配置する必要があります。高さもかなりのポイント
$('#content').append('<div id="groups" style="width: 300px; height:200px; background-color: #888;"><ul class="leftnav" style="list-style-type: none;"></ul></div>');
$('#content').append('<div id="groups"><ul class="leftnav" style="list-style-type: none;"/></div>');
コードは上記のように変更されました