jquery - Jquery附加元素不显示样式

Question

所以说我有：

$('#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>');

我宁愿让类样式工作而不是使用 style="" 因为我有 :hover 事件等

Answer 1

您编写的代码将附加一个仅包含空 UL 的 DIV。该元素没有高度，因此不会显示背景颜色。该样式list-style-type: none;也将不可见，因为您没有列表项。

如果您将项目添加到列表中，它们将具有您指定的样式。

演示

但是请注意，这append将插入实际的 DOM 节点，而不仅仅是 HTML 文本片段。这意味着这$('<div>')将是一个实际的 DIV，而不仅仅是一个开始标签。

如果您希望您的标签在文档中保持打开状态，以便您可以以某种方式继续以#content 这种方式添加元素，您会看到元素被添加到外部#groups（因为组在 UL 之后立即关闭)，并且您的样式将不会被应用。

Answer 2

设置div的高度

height:100px;  // You will see the difference
               // as the UL is currently empty

你需要set the height的 div 因为它是静态的并且里面的内容是空的..

Answer 3

您应该放置结束标签。高度也是相当的点

 $('#content').append('<div id="groups" style="width: 300px; height:200px; background-color: #888;"><ul class="leftnav" style="list-style-type: none;"></ul></div>');

Answer 4

$('#content').append('<div id="groups"><ul class="leftnav" style="list-style-type: none;"/></div>');​

代码如上更改

http://jsfiddle.net/sameerast/U3qbB/1/