jQuery：使用 .appendTo() 将带有 html 内容的 var 粘贴到标签中

Question

我试图粘贴 html 内容（var 中的内容）并将其粘贴到

显然我做错了什么：

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 字符串（但仍然是一个 字符串），您需要将其设为 jQuery 对象才能使用 .appendTo() ，像这样：

 $(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。它比在前面添加类似的元素要快。