jQuery：使用.appendTo（）將具有html內容的var粘貼到標簽中

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 ），您需要使其成為使用.appendTo()的jQuery對象，如下所示：

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

或僅使用.append() ，如下所示：

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

---

順便說一句，為安全起見，請在屬性上使用引號，例如：

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

通過混合這樣的單引號和雙引號，您仍然可以保持它的整潔。

Answer 2

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

$(emptyblock).appendTo( /* etc*/ );

這是代碼的友好版本：

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。 它比添加這樣的元素要快。