jQuery创建并附加多个元素

I have created 2 divs, Div1(freeze) Div2(parent) and again 3 divs(loading, header, msg) appended it to Div2(parent). Entire divs in to body tag. Below are my code, I think there is some other best way to achieve this.

我创建了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);

3 个解决方案

#1

Using jQuery for most of this is complete overkill and just makes the code longer than necessary. Since everything you have is a constant, you can just create a single string of HTML and append that to the body.

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

If you want jQuery references to parts of it for later use, then just use .find() to find them later.

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

For example, you could just do this:

例如,你可以这样做:

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

For later references, you can do something like this:

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

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

#2

Since the question is about creating and appending multiple objects at the same time using jQuery, here is an approach:

由于问题是使用jQuery同时创建和追加多个对象,这里有一个方法:

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

In some cases operating with structural data is more reliable and more convenient than raw markup

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

#3

jQuery methods often implement the decorator patter which mean you can nest calls:

jQuery方法经常实现装饰器模式,这意味着你可以嵌套调用:

el = $('<div>').addClass('parent')
       .append(
         $('<div>').addClass('loadimg')
       );

In this example you add a child div to some parent div. You may use more .append here, and decorate them with addClass, attr and many other jQuery methods.

在此示例中,您将子div添加到某个父div。你可以在这里使用更多.append,并使用addClass,attr和许多其他jQuery方法来装饰它们。

The developer of jQuery already did the hard work implementing the decorator pattern, it is time to honor their efforts and start using it.

jQuery的开发人员已经完成了实现装饰器模式的艰苦工作,现在是时候尊重他们的努力并开始使用它。

#1