jQuery 创建和追加多个元素

Question

我创建了 2 个 div，Div1(freeze) Div2(parent) 并再次将 3 div(loading, header, msg) 附加到 Div2(parent)。将整个 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);

原文由 prakashstar42 发布，翻译遵循 CC BY-SA 4.0 许可协议

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");

原文由 jfriend00 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于问题是关于使用 jQuery 同时 创建和附加多个 对象，这里有一种方法：

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

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

原文由 aleha 发布，翻译遵循 CC BY-SA 3.0 许可协议