jQuery的：與HTML內容的變種粘貼到與.appendTo（）標籤

Question

我試着用html內容（一在var）粘貼並粘貼在<fieldset id="previewDataBlock">

顯然林做錯了什麼：

function createPreviewBlock(){ 
     var emptyBlock = '<ul class=emptyList id=previewBlock>' + 
       '<li id=periodLi></li>' + 
       '<li id=companyLi></li>' + 
       '<li id=industryTypeLi></li>' + 
       '<li id=idustriaDeEmpresaLi></li>' + 
       '<li id=jobTypeLi></li>' + 
       '<li id=actionsLi></li>' + 
       '</ul>'; 
     emptyBlock.appendTo('fieldset#previewDataBlock'); 
     $('ul#previewBlock').removeClass('emptyList').css('display', 'block'); 

} 

，因爲我得到這個錯誤：

TypeError: emptyBlock.appendTo is not a function { message="emptyBlock.appendTo is not a function", more...} 

Answer 1

目前它只是一個HTML的字符串（但仍然是一個string），你需要使它一個jQuery對象使用.appendTo()，像這樣：

$(emptyBlock).appendTo('fieldset#previewDataBlock'); 

或者只是使用.append()，像這樣：

$('fieldset#previewDataBlock').append(emptyBlock); 

---

順便說一句，是在你的屬性多了一點安全使用引號，例如：

var emptyBlock = '<ul class="emptyList" id="previewBlock">' + 

通過混合這樣的單引號和雙引號，你仍然可以保持它很乾淨。

Answer 2

您需要將emptyblock放入jQuery對象中。

這裏有點友好代碼的版本：

function createPreviewBlock(){ 
    $(['<ul class="emptyList" id="previewBlock">', 
     '<li id="periodLi"></li>', 
     '<li id="companyLi"></li>', 
     '<li id="industryTypeLi"></li>', 
     '<li id="idustriaDeEmpresaLi"></li>', 
     '<li id="jobTypeLi"></li>', 
     '<li id="actionsLi"></li>', 
     '</ul>'].join('')) 
     .appendTo('#previewDataBlock'); 
    $('#previewBlock').removeClass('emptyList').css('display', 'block'); 
} 

我使用連接而不是串聯，因爲IE 6和7串聯時吸在垃圾收集。此外，你可以將所有東西都傳遞給jQuery對象並避免變量。這使您可以使用方法鏈接。最後，你只需要在選擇器中使用ID。它比預先使用這樣的元素更快。