我有一个id="div"
的div。
我需要用新的div来复制我的div三次:
id="div1"
id="div2"
id="div3"
我想在body元素中添加div,如图所示。
$(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>
答案 0 :(得分:0)
您可以使用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>
答案 1 :(得分:0)
你可以这样做
var elem = document.getElementsByClassName('commonClass')[0].outerHTML
for(var i =0;i<3;i++){
$('body').append(elem)
}
注意:这只是演示。请相应调整css
答案 2 :(得分:0)
使用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>
答案 3 :(得分:0)
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>
答案 4 :(得分:0)
创建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);
答案 5 :(得分:0)
试试这个...
$(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>