css 未应用于使用 jQuery .append() 创建的 html 元素答案

【问题标题】：css not being applied to html elements created with jQuery .append()css 未应用于使用 jQuery .append() 创建的 html 元素
【发布时间】：2012-07-13 08:14:38
【问题描述】：

所以我知道这可能是可怕的编程实践，但我有点时间紧迫，基本上我的代码中有一个标签，点击屏幕上的按钮后，我试图追加该div内的一堆代码。但是，我注意到了两件事。一，我的其他 javascript 崩溃，除非附加的代码都在一行上，二，即使我已经分配了类，我的 css 样式表也没有应用于代码。以下是相关代码：

            $("#results").append("<ul class='sdt_menu'>");
            for(i=0; i < progression[max].length;i++)
            {
                $("#results").append(
            "<li><a href='#'><img src='images/youAreHere.jpg' alt=''/><span class='sdt_active'></span><span class='sdt_wrap'><span class='sdt_link'>"+progression[max][i]+"</span><span class='sdt_descr'>hover to view description</span></span></a><div class='sdt_box'>"+jobs[progression[max][i]]['description']+"</div></li>");
            }

            $("#results").append("</ul>");

任何帮助揭开这个神秘面纱将不胜感激。

【问题讨论】：

标签： javascript jquery html css append

【解决方案1】：

当你追加时，你应该追加一个完整的、完整的、封闭的标签集。它不像字符串生成器那样工作。试试类似的东西：

var tag = '<ul class="sdt_menu">';
for(var i = 0; i < progression[max].length; i++) {
    tag += '...all of your other list items';
tag += "</ul>";

$(tag).appendTo("#results");

【讨论】：

【解决方案2】：

在您当前的代码中，一旦您添加了 <ul>，它就会被浏览器自动关闭（因为在 DOM 中不可能有未关闭的标签），然后您的 <li> 也被添加到 #results .或者至少，如果让<li> 成为<div> 的子代是合法的，那么它们将是合法的。

相反，您需要将<li> 元素附加到<ul>，而不是#results：

var $ul = $("<ul class='sdt_menu'>");
for (i = 0; i < progression[max].length; i++) {
    $ul.append(...);
}
$ul.appendTo('#results');

【讨论】：

【解决方案3】：

试试这个：

 var tag = [];
 var ic=0;
 tag[++ic] = '<ul class="sdt_menu">';
 for(var i = 0; i < progression[max].length; i++) {
     tag += '...all of your other list items';
 }
 tag[++ic] = "</ul>";

 $("#results").append(tag.join(''));

【讨论】：