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 =“”因为我有：悬停事件等等

Answer 1

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

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

Demo

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

如果您希望您的代码在文档中保持打开状态，以便您可以以某种方式继续向#content in this manner添加元素，那么您将看到这些元素已添加到外部#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/

Jquery附加元素看起来没有样式

4 个答案: