码迷,mamicode.com
首页 > 其他好文 > 详细

三种创建元素方式区别

时间:2019-10-15 13:43:04      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:col   根据   文档   重绘   bsp   文档流   tee   write   htm   

1. document.write( )

 如果页面文档流加载完毕,再调用这句话会导致页面重绘(根据 document.write()写入的内容,生成新的页面)

2.element.innerHTML

 innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂

 例:

  var  array = [ ];

  for( var i = 0; i < 1000; i++ ){

    array.push(" <div style=‘width:100x;height:10px; border:1px solid red;‘ ></div> ");

  }

  document.body.innerHTML = array.join(‘‘);  //  速度在10秒内

3.document.createElement()

 创建多个元素效率稍微低一点,但是结构清晰

总结:不同浏览器下 innerHTML 效率比 createElement  高 

三种创建元素方式区别

标签:col   根据   文档   重绘   bsp   文档流   tee   write   htm   

原文地址:https://www.cnblogs.com/qtbb/p/11676867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!