I want to increment multiple div from existing div along with css using for loop

Question

I have a one div with id="div".

I need to replicate my div three times with new divs having:

id="div1"
id="div2"
id="div3"

I want to append div inside the body element as shown in this image.

enter image description here

$(document).ready(function () {
  for (i = 0; i < 3; i++) {
    $('body').append('#div1' + i + '');
  }
});

#div1{
  width: 167px;
  height: 30px;
  background-color: #ff0000;
}

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

score 0 · Answer 1 · answered Dec 02 '16 at 06:04

0

You could do something like this using the clone property of jquery

$(document).ready(function () {
  var a=$('body');
            for (i = 0; i < 3; i++) {
            a.append($("#div1").clone());
            
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="div1">sdfs</div>
  </body>
  </html>

answered Dec 02 '16 at 06:04

GraveyardQueen

771
1
7
17

This will generate 4 `div`s with the same `id`. – philantrovert Dec 02 '16 at 06:06
it is just an example of what he can do – GraveyardQueen Dec 02 '16 at 06:08

score 0 · Answer 2 · answered Dec 02 '16 at 06:06

0

You can do like this

var elem = document.getElementsByClassName('commonClass')[0].outerHTML
for(var i =0;i<3;i++){
$('body').append(elem)

}

DEMO

Note: This is just demo. Please adjust css accordingly

answered Dec 02 '16 at 06:06

brk

48,835
10
56
78

Pranav C Balan · Answer 3 · 2016-12-02T06:30:29.887

0

Use clone(), attr() and appendTo() methods.

$(document).ready(function() {
  for (i = 2; i < 4; i++) {
    $('#div1')
      // clone the element
      .clone()
      // update id attribute of the element
      .attr('id', 'div' + i)
      // append to the body
      .appendTo('body')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 167px;height: 30px; background-color: #ff0000;">div</div>

edited Dec 02 '16 at 06:30

answered Dec 02 '16 at 06:07

Pranav C Balan

113,687
23
165
188

1

Thanks guys all ur support. i got what i expected. – Aravindh Selva Dec 02 '16 at 06:49

score 0 · Answer 4 · edited May 23 '17 at 12:13

var div = $("div[id^=div]:last");

for (var i = 1; i < 4; i++) {
  var newDivId = parseInt($(div).attr("id").match(/\d+/g), 10) + i;
  var newDiv = div.clone().attr('id', 'div' + newDivId);
  $('body').append(newDiv);
}

div[id^="div"] {
  width: 167px; height: 30px; background-color: #ff0000; margin:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='div1'>
  Lorum Ipsum
</div>

Credits: Roko's Answer

Komal · Answer 5 · 2016-12-02T06:28:25.477

0

Create div to append elements

<div id="divbox"></div>

CSS for div

.dclass {
  width: 100px;
  height: 20px;
  background:red;
  margin:10px;
}

Generate div and add html to other div

var container="";
for (i = 1; i <= 3; i++) {
  container += '<div id="div'+ i + '" class="dclass">'+ i + '</div>';
}
$('#divbox').html(container);

Demo

edited Dec 02 '16 at 06:28

answered Dec 02 '16 at 06:18

Komal

2,716
3
24
32

score 0 · Answer 6 · answered Dec 02 '16 at 06:24

Try this one...

 $(document).ready(function() {
   var div = $('#div1');
   for (i = 2; i < 4; i++) {
     div = div.clone();
     div.attr('id', i);
     $('body').prepend(div);
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" style="width: 167px;margin:15px;height: 30px; background-color: #ff0000;">div

</div>

I want to increment multiple div from existing div along with css using for loop

6 Answers6