在jQuery里创建HTML元素最高效的方法是什么


最近做的一个项目中,经常要实现弹出层/对话框等东东。项目中用的是jQuery框架, 我通常在一页面里创建一些新节点新元素一般用 $("<div>") 这种方式。 然而我觉得这么干不是最佳最有效的方式,所以想问问大家在jQuery里创建新节点最高效的方法是什么,从性能角度谈谈?

jquery HTML JavaScript

痿了继续打飞机 12 years, 4 months ago

首先,弹出层或者对话框,最好能够复用,如果这个dom的结构不是很复杂,使用频度比较高,完全可以先隐藏,等下次使用时直接显示,替换内容即可。
其次,这不是jQuery的效率高低,而是createElement和innerHTML的效率问题。

建议采用innerHTML方式,效率比createElement要高(当然innerHTML的时候不要用字符串拼接,采用Array的join方法)

附上jQuery新建元素的两种方式:
1、采用DOM方式:

   
  $("<div/>").css("border","solid 1px #FFOOOO").html("动态创建的div").appendTo(testDiv);
 

2、用innerHTML方式创建:

   
  $("<div style='border:solid 1px #FFOOOO'>动态创建的div</div>").appendTo(testDiv);
 

看别人的总结
其实效率也在于编写的代码,在知道可用的API的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来。

samshen answered 12 years, 4 months ago

Your Answer