Question

我是javascript循环遍历大量项目并使用

   document.getElementById("flap" + i).innerHTML = flap(i)

在我的页面上写一个大数字（每次50个）的DIV。而不是填充我的HTML页面与大量的DIV，在大多数情况下将不会使用我想使用：

HTML DOM createElement（）方法......动态创建50个DIV，只有我需要的数量。

以下是我需要动态创建的示例HTML DIV（因此，我需要从“0”开始并创建“49”：

    <div style="clear:both"> <br> </div>
    <div id="flapBox3">
        <p id='whenFlap3' class= "mscFlapTime">&nbsp &nbsp &#149 &nbsp posted &nbsp<b >7    minutes ago</b></p>
        <b id='flapSum3' class= "mscFlapSumBold">Summary</b>    
        <p id='flap3'class= "mscFlapText" >Lorem ipsum .. </p>            
    </div>

我不知道该怎么做，肯定可以使用一些帮助！感谢!!!

Answer 1

你可以，但是在增益上一遍又一遍地向DOM添加元素实际上非常慢，因为它会强制浏览器每次都重排/重新绘制视口。在内存中构建HTML并在最后一次插入所有内容时效率要高得多。

您可以将构建为字符串，然后使用innerHTML插入它。或者，您可以在文档片段中创建DOM节点，然后将其插入DOM中。

请参阅：Add to DOM without jQuery了解如何添加和操作dom节点。此示例不使用多个节点，但您可以理解。

Answer 2

这是使用innerHTML的基本示例：

http://jsfiddle.net/rn5GG/2/

var template =  document.getElementById('template').innerHTML;
var htmlString = template;

for(var i=0;i<50;i++){
htmlString += template;
}

document.body.innerHTML =  htmlString;

HTML：

 <div id='template' style="clear:both"> <br> 
<div id="flapBox3">
    <p id='whenFlap3' class= "mscFlapTime">&nbsp &nbsp &#149 &nbsp posted &nbsp<b >7    minutes ago</b></p>
    <b id='flapSum3' class= "mscFlapSumBold">Summary</b>    
    <p id='flap3'class= "mscFlapText" >Lorem ipsum .. </p>            
</div>

我可以使用document.createElement动态创建一系列DIV吗？

2 个答案: