我正在重构一些旧的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
但我不确定这样是否更好。
虽然这是一个非常老的问题,但我认为用最近的信息来更新它会很好;
自jQuery 1.8以来,有一个jQuery. parsehtml()函数,它现在是创建元素的首选方式。此外,通过$('(HTML代码在这里)')解析HTML也存在一些问题,例如jQuery官方网站在他们的发布说明中提到了以下内容:
轻松的HTML解析:您可以再次使用前导空格或
在$(htmlString)标签前的换行。我们仍然强烈建议这样做
解析从外部获取的HTML时使用$.parseHTML()
源代码,并可能对HTML解析做进一步的更改
的未来。
为切合实际问题,所提供的例子可译为:
this.$OuterDiv = $($.parseHTML('<div></div>'))
.hide()
.append($($.parseHTML('<table></table>'))
.attr({ cellSpacing : 0 })
.addClass("text")
)
;
不幸的是,这比只使用$()更不方便,但它给了你更多的控制,例如你可以选择排除脚本标签(它会留下内联脚本,如onclick):
> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick="a"></div>]
> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick="a"></div>, <script></script>]
此外,以下是根据新情况调整的排名第一的答案的基准:
JSbin链接
jQuery 1.9.1
$.parseHTML: 88ms
$($.parseHTML): 240ms
<div></div>: 138ms
<div>: 143ms
createElement: 64ms
看起来parseHTML更接近createElement而不是$(),但是在将结果包装到一个新的jQuery对象中之后,所有的改进都消失了
我刚刚做了一个小的jQuery插件:https://github.com/ern0/jquery.create
它遵循你的语法:
var myDiv = $.create("div");
DOM节点ID可以指定为第二个参数:
var secondItem = $.create("div","item2");
严重吗?不。但是这个语法比$("<div></div>")更好,而且它的价值非常高。
我是一个新的jQuery用户,从DOMAssistant切换过来的,它有类似的功能:http://www.domassistant.com/documentation/DOMAssistantContent-module.php
我的插件更简单,我认为attrs和内容最好通过链接方法添加:
$("#container").append( $.create("div").addClass("box").html("Hello, world!") );
同时,它也是一个简单的jquery插件(第100个)的好例子。
这是“一”行中的例子。
this.$OuterDiv = $('<div></div>')
.hide()
.append($('<table></table>')
.attr({ cellSpacing : 0 })
.addClass("text")
)
;
更新:我想我应该更新这篇文章,因为它仍然有相当多的流量。在下面的评论中,有一些关于$("<div>") vs $("<div></div>") vs $(document.createElement('div'))作为创建新元素的方式的讨论,以及哪种是“最好的”。
我整理了一个小型基准测试,以下是重复上述选项10万次的大致结果:
jQuery 1.4, 1.5, 1.6
Chrome 11 Firefox 4 IE9
<div> 440ms 640ms 460ms
<div></div> 420ms 650ms 480ms
createElement 100ms 180ms 300ms
jQuery 1.3
Chrome 11
<div> 770ms
<div></div> 3800ms
createElement 100ms
jQuery 1.2
Chrome 11
<div> 3500ms
<div></div> 3500ms
createElement 100ms
我觉得这没什么好惊讶的,但是文件。createElement是最快的方法。当然,在开始重构整个代码库之前,请记住我们在这里讨论的差异(除了老式jQuery版本之外的所有版本)相当于每1000个元素增加3毫秒。
更新2
jQuery 1.7.2更新,并将基准放在JSBen上。Ch可能比我的原始基准更科学,而且现在可以众包了!
http://jsben.ch/#/ARUtz