CSS不適用於jQuery .append（）創建的html元素

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