Question

114

jQuery create and append multiple elements

rated 0 times [ 118] [ 4] / answers: 1 / hits: 79492 / 10 Years ago, tue, august 26, 2014, 12:00:00

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.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

martin

Add To Favorites

Follow

Total Points: 405

Total Questions: 93

Total Answers: 93

Location: Mexico

Member since Sun, Jul 25, 2021

3 Years ago

martin questions

1 PDF-LIB add text and image from existing PDF

Wed, Jun 16, 21, 00:00, 3 Years ago

1 testing websockets with postman new api

Mon, May 24, 21, 00:00, 3 Years ago

1 React How to render nested dropdown list in a form from a json data?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 Prevent modal from closing after re-render in react

Mon, Jan 11, 21, 00:00, 3 Years ago

1 Discord.js | You can only bulk delete messages that are under 14 days old

Wed, Oct 28, 20, 00:00, 4 Years ago

View All

answered 10 Years ago tristani · Accepted Answer

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