jQuery创建并附加多个元素

Question

我创建了2个div,Div1(冻结)Div2(父)和3个div(加载,标题,msg)将它附加到Div2(父).整个div到body标签.以下是我的代码,我认为还有其他一些最好的方法来实现这一目标.

    var freeze = $('<div/>',{
        "class" : "freeze"
    });
    var parent = $('<div/>',{
        "class":"parent"
    });

    var loading = $('<div/>',{
        "class":"loadimg"
    }).appendTo(parent);

    var header = $('<div/>',{
        "class":"header"
    }).appendTo(parent);
    var msg = $('<div/>',{
        "class":"msg"
    }).appendTo(parent);

    $('body').append(freeze,parent);

Answer 1

在大多数情况下使用jQuery是完全矫枉过正的,只会使代码超出必要的时间.由于您拥有的所有内容都是常量,因此您只需创建一个HTML字符串并将其附加到正文中即可.

如果你想让jQuery引用它的一部分供以后使用,那么只需使用.find()稍后再找它们.

例如,你可以这样做:

var html = '<div class="freeze"></div>' + 
           '<div class="parent">' + 
               '<div class="loadimg"></div>' +
               '<div class="header"></div>' +
               '<div class="msg"></div>' +
           '</div>';
$(document.body).append(html);

对于以后的引用,您可以执行以下操作:

var header = $(document.body).find(".header");

Answer 2

由于问题是关于创建和附加多个对象在同一时间使用jQuery,这里是一个办法:

$('body').append([
    $('<div/>',{ "class": "freeze" }),
    $('<div/>',{ "class": "parent" }).append([
        $('<div/>',{ "class": "loadimg" }),
        $('<div/>',{ "class": "header" }),
        $('<div/>',{ "class": "msg" })
    ]);
]);

在某些情况下,使用结构数据进行操作比原始标记更可靠,更方便