使用循环创建一个div

Question

我创建一个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使用循环语句。任何人帮助我..

Answer 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次重排，而且你不需要jQuery。

要追加到jQuery选择：

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

或DOM元素：

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

Answer 2

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

我会去第一种方法。

相关裁判：

• .append()

Answer 3

这里有一个选项：

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