我最近在学原生的javascript,在使用js动态输出元素的时候,可以使用方法createElement(),对其属性进行设置,再配合appendChild()或者insertBefore()将之输出;也可以使用innerHTML直接把html代码输出(甚至能不能使用outerHTML起到替换元素的效果?)。那么哪种方法和效率和兼容性比较好呢?还是说还有没有其他方法?(尽量不要使用jQuery之类的类库)

解决方案 »

  1.   

    DOM操作:createElement,appendChild,clone之类
    XML-DOM
    有一些在HTML DOM中不可用,大部分通用,test一下便可。
      

  2.   

    使用appendChild要比innerHTML要好一些 但是这种效率方面主要体现在元素的批量操作上比如我要创建500个单元格 如果每一次都去操作table的innerHTML 会导致DOM每次都要重绘和重排 效率低
    比较好的做法是创建文档碎片docmentFragment tr元素appendChild 新建的td 最后将文档碎片appendChild tr
    tbody append文档碎片 这样性能会快很多再者 用innerHTML尽量不要做+=操作 因为一个+=操作 js要做6件事 (具体哪6件就不详说了) 用数组的push代替
    最后一次再innerHTML像这种innerHTML、outerHTML的操作 少量的dom元素操作还好 多了的时候就得考虑性能了