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

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

浮生未歇 发布于 2017-05-23 字数 292 浏览 1054 回复 2

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

晚风撩人 2017-06-28 2 楼

jQuery中可以使用工厂函数$()来创建一个新元素,$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
不过动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中,将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。将新创建的元素插入文档的方法有:

append() :向每个匹配的元素内部追加内容
appendTo() :将所有匹配的元素追加到指定的元素中
prepend() :向每个匹配的元素内部前置内容
prependTo() :将所有匹配的元素前置到指定的元素中
after() :在每个匹配的元素之后插入内容
insertAfter() :将所有匹配的元素插入到指定元素的后面
before() :将每个匹配的元素之前插入内容
insertBefore() :将所有匹配的元素插入到指定的元素的前面

上面几个方法,经过测试,效率都是差不多的,另外jQuery的html方法同样能达到向文档插入新节点的功效,如:$(dom).html("<div>abc</div>"),这个方法对应js的修改元素的innerHTML属性,效率相当来说会高一些

清晨说ぺ晚安 2017-05-26 1 楼

首先,弹出层或者对话框,最好能够复用,如果这个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的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来。