Javascript 使用循环创建一个div

我创建了一个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>

---

是否有一种使用循环语句创建此div的方法。有人帮我吗？

假设您有以下

div

插入新的

div

s：

<div id="target">
   <!-- all divs will append here -->
</div>

jQuery:

for(var i =1; i<= 10; i++){
  $('#target').append($('<div/>', { id: 'r' + i, 'class' : 'ansbox'}))
}

for（var i=1；i这里有一个选项：

for(var i = 0; i <=10; i++) {
   $('<div id="r'+i+'" class="ansbox"></div>').appendTo("target");
}

for（var i=0；i我建议使用一些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);

或dom元素：

document.getElementById('sel').appendChild(toAdd);


添加新位置
位置

在这里，我想通过向每个新条目添加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>


$（文档）.ready（函数（）{
var inno=document.getElementById（“locval”）.value；
对于（var start=1；inno>=start；start+=1）
{
开始
}
$（“#添加位置”）。单击（函数（）{
$（“#location div”）.append（'location'）；
});
});
@undefined
target
可以放在他想放的任何地方。不是一个特定的标记/变量…我喜欢对象文字的属性分配方法，它更容易维护。我得到了引用错误：找不到变量：$你也可以用jQuery只做一个
附加
。我同意使用纯JS可以提高性能，但cr在大多数情况下，按照您所建议的方式吃节点列表实际上比串接html要慢。我完全同意；我喜欢制作节点，因为它可以让您在附加DOM元素之前玩DOM元素……但这完全取决于好奇者的使用情况，似乎是将html串接在一起的好方法r、 正如在这里的评论中提到的。我得到错误：HierarchyRequestError：该操作将生成一个不正确的节点树。我所做的只是复制所有代码，直到行（这样你只做一个附加…）我是否也需要在行之后使用代码？
document.getElementById('sel').appendChild(toAdd);

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

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