jQuery create and append multiple elements

Question

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

aleha_84 · Accepted Answer · 2018-02-12 19:59:46Z

42

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

answered Feb 12, 2018 at 19:59

aleha_84

8,5892 gold badges42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2014-08-26 04:43:57Z

39

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

answered Aug 26, 2014 at 4:43

jfriend00

711k104 gold badges1k silver badges1k bronze badges

3 Comments

shaedrich Over a year ago

Keep in mind not to use user input variables in your html string because it could be used for XSS attacks. To prevent this, use aleha's answer.

shaedrich Over a year ago

Just because it isn't mentioned in the question doesn't mean that someone who googles for this question might have the exact same use case. In my mind, when they adapt that example, they should know this. I didn't want to criticize you in any way. Just as an information to others.

jfriend00 Over a year ago

@shaedrich - No XSS attack is possible with the code as shown here because everything is a constant as defined by the server, with no outside content injected in. So, this solution to the OP's issue has zero vulnerability to XSS attacks just like aleha's answer which you referenced. This solution was written because the OP asked for something simpler than the jQuery-based solution they were using. If there was outside content, then it would obviously have to be dealt with carefully and similarly aleha's answer would also have to deal with it carefully.

jox · Accepted Answer · 2022-11-02 22:49:14Z

3

jQuery methods often implement the decorator pattern which means you can nest calls:

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.

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

edited Nov 2, 2022 at 22:49

jox

2,40827 silver badges34 bronze badges

answered Jun 30, 2018 at 21:24

romaroma

6588 silver badges13 bronze badges

2 Comments

ICW Over a year ago

I don't understand how this is decorator pattern?

jox Over a year ago

It's the Fluent interface pattern.

DamnScandalous · Accepted Answer · 2021-02-23 06:38:33Z

1

Please use symbol backtick '`' in your front and end of html string, this is so called template literals, now you able to write pure html in multiple lines and assign to variable.

Example >> var htmlString =

`

Your

HTML

`

edited Feb 23, 2021 at 6:38

answered Feb 23, 2021 at 6:32

DamnScandalous

1029 bronze badges

Collectives™ on Stack Overflow

jQuery create and append multiple elements

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Linked

Related