JQuery создает и добавляет несколько элементов

Я создал 2 divs, Div1 (заморозить) Div2 (родительский) и снова 3 divs (загрузка, заголовок, msg) добавили его в Div2 (родительский). Целые divs в тег тела. Ниже мой код, я думаю, что есть и другой лучший способ достичь этого.

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

Ответ 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");

Ответ 2

Поскольку вопрос о создании и добавлении нескольких объектов в в то же время с помощью jQuery, вот подход:

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

В некоторых случаях работа со структурными данными более надежна и удобна, чем сырая разметка