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