Adding elements on loop jQuery

Question

I am trying to generate a row of 16 boxes on load of webpage.

Here is my code:

var box = $("<div></div>").addClass("box");
    $(document).ready(function(){
            for(var i = 0; i < 16; i++) {
                $("#container").append(box);
                }
            });

I also tried this within the for loop's code block:

if($("#container:contains(box)")) {
   $(box).append(box);
}

I kind of understand why this does not work. That var box is only referencing an element and is not a copy of an element?

As you can likely tell, I'm new. I would really appreciate some pointers on how I can achieve this. Thanks.

$("#container").append(box.clone()); would work. More efficient doing this as string though — charlietfl
– charlietfl, Commented Jan 24, 2015 at 23:34

Bhojendra Rauniyar · Accepted Answer · 2015-01-24 23:31:02Z

2

Why not just use like this?

for(var i = 0; i < 16; i++) {
   $("#container").append('<div class="box box-'+i+'" />');
}

edited Jan 24, 2015 at 23:31

answered Jan 24, 2015 at 23:23

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

1 Comment

Paul Roub Over a year ago

That will leave strange attributes: <div class="box box-"0 />, etc. You probably meant `$("#container").append('<div class="box box-' + i + '" />');

Paul Roub · Accepted Answer · 2015-01-24 23:25:06Z

0

You're appending the same div over and over. That will just move it (in this case, right back where it was). For a new div each time:

$(document).ready(function(){
  var ctr = $('#container');

  for(var i = 0; i < 16; i++) {
    ctr.append("<div class='box'></div>");
  }
});

  $(document).ready(function() {
    var ctr = $('#container');

    for (var i = 0; i < 16; i++) {
      ctr.append("<div class='box'></div>");
    }
  });

.box {
  margin: 10px;
  height: 25px;
  width: 25px;
  background-color: red;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>

answered Jan 24, 2015 at 23:25

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

1 Comment

Alex Brankin Over a year ago

Seems so simple now that you have shown me how, ha! Thank you Paul.

Walter Stabosz · Accepted Answer · 2015-01-25 01:54:53Z

0

I recommend against using append in a loop, bad performance. I suggest this:

  var buffer = [];

  for(var i = 0; i < 16; i++) {
    buffer.push("<div class='box'></div>");
  }

  var html=buffer.join('');
  $('#container').append(html);

edited Jan 25, 2015 at 1:54

answered Jan 24, 2015 at 23:30

Walter Stabosz

7,7955 gold badges48 silver badges79 bronze badges

1 Comment

Alex Brankin Over a year ago

I'll have a play about with this method also. Thanks.

Collectives™ on Stack Overflow

Adding elements on loop jQuery

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related