jQuery - Append one element specific amount of times?

Question

Lets say that in this case i have 4 divs called ".CountThese" and i wanted to do just that, get the number of elements with that specific class and then append a div as many times as was the amount of ".CountThese" ( 4 times in this case )

This is the html:

<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>

<div class="appendHere"></div>

This would be the result:

<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>

<div class="appendHere">
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
</div>

I got only so far that i found out that you can count number of elements something like this:

function divcount() {
   var Count =  $('.CountThese').length(); 
   document.write(Count)
}

thought i dont necessarily know how to use that.. i seriously have no idea how i could then use that number to append divs or anything else for that matter..

How can this be achieved?

Solution 1

You can iterate over the .CountThese divs and for each one, append to .appendHere

$('.CountThese').each(function(){
  $('.appendHere').append('<div class="appendedDivs"></div>');
});

Solution 2

You can avoid the manual iteration by using the array join() method like:

$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

Where n is the number of elements you want to create.

This is better than the accepted answer since it only manipulates the DOM once rather than n times.

---

var n = $(".CountThese").length;
$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

.CountThese {
  display: inline-block;
  width: 46px;
  height: 50px;
  background: royalblue;
}
.appendedDivs {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 5px;
  margin-right:5px;
  color: gold;
  font-weight: bold;
  background: dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>

<div class="appendHere"></div>

Solution 3

The best way to do it would be to iterate over each .CountThese divs like Don and Christopher mentioned. If you wanted to do it your way, though, you could do it like this:

var count = $('.CountThese').size();
for (var i=0; i<count; i++){
    $('div.appendHere').append('<div class="appendedDIVs"></div>');
}

Comments

[Joonas]

This seems almost too simple.. Thanks.

[Don Zacharias]

"jQuery: It's almost too simple."