Question

我有一个id="div"的div。

我需要用新的div来复制我的div三次：

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

我想在body元素中添加div，如图所示。

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>

Answer 1

您可以使用jquery

的clone属性执行此类操作

$(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>

Answer 2

你可以这样做

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

}

DEMO

注意：这只是演示。请相应调整css

Answer 3

使用clone()，attr()和appendTo()方法。

$(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>

Answer 4

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>

致谢：Roko's Answer

Answer 5

创建div以追加元素

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

div的CSS

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

生成div并将html添加到其他div

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

Demo

Answer 6

试试这个...

 $(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>

我想从现有的div增加多个div以及使用for循环的css

6 个答案: