我正在重构一些旧的JavaScript代码,并且正在进行大量的DOM操作 .
var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;
var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);
我想知道是否有更好的方法来使用jQuery . 我一直在尝试:
var odv = $.create("div");
$.append(odv);
// And many more
但我不确定这是否更好 .
12 回答
我刚刚制作了一个小的jQuery插件:https://github.com/ern0/jquery.create
它遵循你的语法:
DOM节点ID可以指定为第二个参数:
这是认真的吗?不 . 但是这个语法比$("<div></div>")好,而且这个钱非常好 .
我是一个新的jQuery用户,从DOMAssistant切换,它具有类似的功能:http://www.domassistant.com/documentation/DOMAssistantContent-module.php
我的插件更简单,我认为通过链接方法添加更好的内容和内容:
此外,它是一个简单的jQuery插件(第100个)的一个很好的例子 .
这是你在“一”行中的例子 .
更新:我以为'd update this post since it still gets quite a bit of traffic. In the comments below there'讨论了
$("<div>")
vs$("<div></div>")
vs$(document.createElement('div'))
作为一种创建新元素的方式,这是"best" .我把a small benchmark放在一起,这里大致是重复上述选项100,000次的结果:
jQuery 1.4, 1.5, 1.6
jQuery 1.3
jQuery 1.2
我认为这并不是什么大惊喜,但
document.createElement
是最快的方法 . 当然,在您开始重构整个代码库之前,请记住我们在这里讨论的差异(除了jQuery的古老版本之外的所有版本)相当于每千个元素额外增加3毫秒 .Update 2
针对jQuery 1.7.2进行了更新,并在JSBen.ch上进行了基准测试,这可能比我的原始基准测试更加科学,而且它现在可以进行众包!
http://jsben.ch/#/ARUtz
从
jQuery1.8
开始,使用$.parseHTML()创建元素是更好的选择 .有两个好处:
1.如果您使用旧的方式(可能类似于
$(string)
),jQuery将检查字符串以确保您要选择html标记或创建新元素 . 通过使用$.parseHTML()
,您告诉jQuery您要明确地创建一个新元素,因此性能可能会好一些 .2.更重要的是,如果你使用旧的方式,你可能会遭受跨站点攻击(more info) . 如果你有类似的东西:
一个坏人可以输入
<script src="xss-attach.js"></script>
来取笑你 . 幸运的是,$.parseHTML()
为你避免这种尴尬:但是,请注意
a
是一个jQuery对象,而b
是一个html元素:我这样做:
UPDATE
从jQuery的最新版本开始,以下方法不分配在第二个Object中传递的属性
Previous answer
我觉得使用
document.createElement('div')
和jQuery
更快:虽然这是一个非常古老的问题,但我认为用最新信息更新它会很好;
从jQuery 1.8开始,有一个jQuery.parseHTML()函数,现在是创建元素的首选方法 . 此外,通过
$('(html code goes here)')
解析HTML存在一些问题,例如官方jQuery网站在_517602中提及以下内容:为了与实际问题相关,提供的示例可以转换为:
不幸的是,它不如仅使用
$()
方便,但它可以为您提供更多控制,例如您可以选择排除脚本标记(它会留下内联脚本,如onclick
):此外,这里是从最佳答案调整到新现实的基准:
JSbin Link
jQuery 1.9.1
看起来
parseHTML
比$()
更接近createElement
,但是在将结果包装到新的jQuery对象之后所有的提升都消失了是在jQuery中创建DIV元素的最短/最简单的方法 .
这一切都很直接!下面是一些简单的例子......
开箱即用的jQuery没有相当于createElement的东西 . 事实上,jQuery的大部分工作是使用innerHTML内部完成纯粹的DOM操作 . 正如亚当上面提到的那样,你可以获得类似的结果 .
还有一些插件可以使用DOM而不是innerHTML,例如appendDOM,DOMEC和FlyDOM等等 . 性能方面,本机jquery仍然是性能最高的(主要是因为它使用innerHTML)
创建新的DOM元素是
jQuery()
方法的核心功能,请参阅:http://api.jquery.com/jQuery/#creating-new-elements
和特别http://api.jquery.com/jQuery/#example-1-1
只需提供要添加到jQuery构造函数的元素的HTML
$()
将从新构建的HTML返回一个jQuery对象,适合附加到DOM中使用jQuery的append()
方法 .例如:
然后,如果您愿意,可以以编程方式填充此表 .
这使您能够指定任何您喜欢的任意HTML,包括类名或其他属性,您可能会比使用
createElement
更简洁,然后通过JS设置cellSpacing
和className
等属性 .