使用循環創建一個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"); 
}