Javascript 使用循环创建一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11398522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a div using loop
提问by Dineshkani
I create a div and its css id like this.
我像这样创建了一个 div 和它的 css id。
<div id="r1" class="ansbox"></div>
<div id="r2" class="ansbox"></div>
<div id="r3" class="ansbox"></div>
<div id="r4" class="ansbox"></div>
<div id="r5" class="ansbox"></div>
<div id="r6" class="ansbox"></div>
<div id="r7" class="ansbox"></div>
<div id="r8" class="ansbox"></div>
<div id="r9" class="ansbox"></div>
<div id="r10" class="ansbox"></div>
is there a way to create this div using looping statement. Anyone help me..
有没有办法使用循环语句创建这个 div。有谁帮帮我..
回答by bokonic
I would recommend using some javascript (without jquery) for performance:
我建议使用一些 javascript（不带 jquery）来提高性能：
var toAdd = document.createDocumentFragment();
for(var i=0; i < 11; i++){
var newDiv = document.createElement('div');
newDiv.id = 'r'+i;
newDiv.className = 'ansbox';
toAdd.appendChild(newDiv);
}
document.appendChild(toAdd);
This way you only make one append(), only 1 reflow, and you don't need jQuery.
这样你只做一个append()，只有 1 次回流，而且你不需要 jQuery。
To append it to a jQuery selector:
要将其附加到 jQuery 选择器：
$('sel').append(toAdd);
Or a dom element:
或者一个 dom 元素：
document.getElementById('sel').appendChild(toAdd);
回答by thecodeparadox
Suppose you have following divwhere you will insert new divs:
假设您在以下div位置插入 new divs：
<div id="target">
<!-- all divs will append here -->
</div>
jQuery:
jQuery：
for(var i =1; i<= 10; i++){
$('#target').append($('<div/>', { id: 'r' + i, 'class' : 'ansbox'}))
}
or
或者
for(var i =1; i<= 10; i++){
$('#target').append('<div id="r'+ i +'" class="ansbox"></div>')
}
I will go for first approach.
我将采用第一种方法。
Related refs:
相关参考：
回答by ayyp
Here's one option:
这是一种选择：
for(var i = 0; i <=10; i++) {
$('<div id="r'+i+'" class="ansbox"></div>').appendTo("target");
}
回答by maham
<div class="ibox-content" id="location-div">
<div class="row">
<div class="col-sm-12">
<button id="addlocation" type="button" class="btn btn-w-m btn-primary pull-right">Add new location</button>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="col-sm-2">
<label class="form-label">Location <span ><input type="text" readonly id="locval" style="width:20px;border:0px;" value="1"></span></label>
</div>
<div class="col-sm-10">
<input type="text" name="" class="form-control ">
</div>
</div>
</div>
Here I want to add a dynamic row by adding 1 to each new entry this will solve your problem
在这里，我想通过向每个新条目添加 1 来添加一个动态行，这将解决您的问题
<script>
$(document).ready(function(){
var inno = document.getElementById("locval").value;
for(var start = 1; inno >= start; start+=1)
{
start;
}
$("#addlocation").click(function(){
$("#location-div").append('<div class="row" style="margin-top:10px;"><div class="col-sm-2"><label class="form-label">Location <span ><input type="text" readonly id="locval" style="width:20px;border:0px" value="'+start+++'"></span> </label></div><div class="col-sm-10"><input type="text" name="" class="form-control "></div></div>');
});
});
</script>
