使用循环创建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插入新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()

Answer 3

这是一种选择：

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