使用循环创建一个 div答案

【问题标题】：Create a div using loop使用循环创建一个 div
【发布时间】：2012-07-09 15:44:04
【问题描述】：

我像这样创建一个 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。任何人都可以帮助我..

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我建议使用一些 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);

这样你只做一个append()，只有1个reflow，而且你不需要jQuery。

要将其附加到 jQuery 选择器：

$('sel').append(toAdd);

或者一个dom元素：

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

【讨论】：

你也只能用jQuery制作一个append
我同意使用纯 JS 可以提高性能，但在大多数情况下，按照您建议的方式创建节点列表本质上比将 html 串在一起要慢。
我完全同意；我喜欢制作节点，因为它可以让您在添加 DOM 元素之前对其进行操作......但这完全取决于用例
对于那些好奇的人，this approach 似乎是将 html 串在一起的好方法，如 cmets 中所述。
我得到错误： HierarchyRequestError: 该操作会产生不正确的节点树。我所做的只是将所有代码复制到该行（这样您只需追加一个...）我是否也需要在该行之后使用代码？

【解决方案2】：

假设您关注div，您将在其中插入新的divs：

<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<= 10; i++){
  $('#target').append('<div id="r'+ i +'" class="ansbox"></div>')
}

我会选择第一种方法。

相关参考文献：

.append()

【讨论】：

我喜欢对象字面量的属性赋值方式，它更容易维护
我得到 ReferenceError: Can't find variable: $

【解决方案3】：

这是一种选择：

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

【讨论】：

@undefined target 在他想放的任何地方。不是特定的标签/变量...

【解决方案4】：

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

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

【讨论】：