jQuery create and append multiple elements

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.

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

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

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

$('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