css不适用于使用jQuery创建的html元素.append（）

Question

所以我知道这可能是可怕的编程习惯，但我有点时间紧张，基本上我的代码中有一个标签，当点击屏幕上的按钮时，我试图在该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>"); 

任何帮助揭秘这将不胜感激。

Answer 1

当您追加时，您应该追加完整的完整闭合标记集。它不像stringbuilder那样工作。尝试，而不是像这样：

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"); 

Answer 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'); 

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