本文介绍了JavaScript中三种动态创建元素的方法：document.write()、element.innerHTML和document.createElement()，并对比了它们之间的性能差异。
javaScript中有三种动态创建元素的方式
区别
三种方式都可以动态生成元素，详细区别如下：
1、首先说说document.write(),
代码如下，<body></body>标签中添加一个按钮，一个字符如下
运行效果如下：
当点击按钮后：
第二种情况，直接在页面中使用document.write()，此时效果如下：
综上，document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘。
2、innerHTML效率测试
innerHTML也可以动态创建元素，现在测试下它的执行效率，代码如下：控制台输出单位为ms
运行结果截图：
创建1000个带有样式的div用时870ms
上述方法是直接拼接的结果，现在我们利用数组，先把拼接的字符放数组里然后统一执行，看看效果
代码：
运行结果
耗时只需要2ms，所以使用innerHTML动态创建元素的时候，利用数组一次执行完毕是最佳的方式。
3、document.createElement()
代码：
运行结果
效率稍低于使用innerHtml数组执行的方式。
总结：
1、document.write(),是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
2、innnerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
3、innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4、createElement(),创建多个元素效率稍微低一点，但是结构清晰
总之：不同浏览器下innerHTML 效率 > createElement，所以用innerHTML就完了。
扫一扫
到【灌水乐园】发言
