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就完了。