javascript - 使用循环创建一个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);