js动态生成表格代码

三种动态创建元素的区别

document.write()element.innerHTMLdocument.createElement()

区别

1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂（innerHTML采取数组形式拼接会快一点比createElement（）快）

4.createElement()创建多个元素效率稍低一点点，但是结构更清晰

总结:不同浏览器下，innerHTML效率要比creatElement高

动态生成表格案例分析

因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。

2.所有的数据都是放到tbody里面的行里面。

3.因为行很多，我们需要循环创建多个行（对应多少人）

源码如下

效果图如下