js-使用js生成10*10个带标号的div

在网上看到很多都是使用两个循环嵌套起来生成10*10个div，今天想到了一些新的方法，就记录了下来。其实这个实现并不复杂，只是需要费点心思找下规律。
html代码如下：

<div class="wrap"></div>

10*10个小div是由js动态生成，所以在结构中只需要写出外框。
首先使用循环嵌套和定位来实现
css代码如下：

.wrap{    width:1000px;    height:1000px;    border:1px solid #000;    position：relative;}.wrap div{    width:98px;    height:98px;    border:1px solid #000;    position:absolute;    font:18px/98px "微软雅黑";    text-align:center;}

js代码如下：

var box=document.querySelector(".wrap");var inner="";for(var i=0;i<10;1++){    for(var j=0;j<10;j++){       inner+='<div style="left:'+i*100+'px;top:'+j*100+'px;>'+（i*10+j）+'</div>';       }   }   box.innerHTML=inner;

其次是使用浮动和单层嵌套，结构不变，稍微修改下css样式。

.wrap{    ....    //与上文css样式类似，只需去除position}.wrap div{    ....    //与上文css样式类似，只需去除position,然后设置左浮动    float:left;}

js代码如下所示

var box=document.querySelector(".wrap");var inner="";for(var i=0;i<100;i++){    inner+='<div>'+i+'</div>    }     box.innerHTML=inner;

最后是使用定位和单层嵌套。结构和样式与第一个方法所用的相同，故不再赘述。js代码如下所示：

var box=document.querySelector(".wrap");var inner="";for(var i=0;i<100;i++){    var x=i%10;//x为个位数；    var y=parseint(i/10)；//y为10位数；    inner += '<div style="left:'+x*100+'px;top:'+y*100+'px">'+i+'</div>';}box.innerHTML=inner;

这三种方法中，使用浮动代码量最少的。但是浮动在没有设置父级高度时，需要给父级清浮动。第一种方法比较容易想到，第三种则是深挖规律的出来的写法。

有的人会问，为什么还要定义一个空的inner来存储内容，直接使用box.inneHTML不是也可以吗？没错，理论上来说，直接使用box.innerHTML是可以达到相同的效果。但是据实际情况来说，获取或更改页面结构是非常耗性能的。在循环中定义一个空字符串来存贮循环产生的内容，再一次性写入页面会比每次循环改变页面结构写入内容，耗用时间会减少近30倍。