jQuery document.createElement等价？

jQuery document.createElement equivalent?

我正在重构一些旧的JavaScript代码，并且正在进行大量的DOM操作。

1
2
3
4
5
6
7
8
9

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来实现这一点。我一直在尝试：

1
2
3

var odv = $.create("div");
$.append(odv);
// And many more

但我不确定这是否更好。

相关讨论

这是"一"行中的示例。

1
2
3
4
5
6
7

this.$OuterDiv = $('')
.hide()
.append($('<table></table>')
.attr({ cellSpacing : 0 })
.addClass("text")
)
;

更新：我想我会更新这篇文章，因为它仍然有相当多的流量。在下面的评论中，有一些关于$("")vs $("")vs $(document.createElement('div'))作为创建新元素的方式的讨论，哪些是"最好的"。

我把一个小基准放在一起，这里大致是重复上述选项100000次的结果：

jquery 1.4、1.5、1.6

1
2
3
4

Chrome 11 Firefox 4 IE9
440ms 640ms 460ms
420ms 650ms 480ms
createElement 100ms 180ms 300ms

jQuery 1.3

1
2
3
4

Chrome 11
770ms
3800ms
createElement 100ms

jQuery 1.2

1
2
3
4

Chrome 11
3500ms
3500ms
createElement 100ms

我认为这并不奇怪，但document.createElement是最快的方法。当然，在开始重构整个代码库之前，请记住我们在这里讨论的差异(除了jquery的古老版本之外)相当于每千个元素增加3毫秒。

更新2

为jquery 1.7.2更新，并将基准放在jsben.ch上，这可能比我的原始基准更科学，而且现在可以众包了！

http://jsben.ch//阿鲁兹

相关讨论

您会发现document.createElement比jquery将HTML字符串转换为元素快得多。(以防万一你有一种冲动，想让事情更有效率)
这对jquery<1.3是正确的，现在我相信它的速度是相等的。
您可以通过创建这样的元素来进一步减少上述内容：$(''(不带结束标记)。jquery将添加结束标记。
@Kevin，这是真的，但是它使jQuery做了更多的工作(它通过一个regex来添加结束标记)，所以我更喜欢上面的方法。此外，它还将您的代码与$('div')区分开来，后者在视觉上非常相似，但在功能上却截然不同。
所以基本上，@sungendran&；@nickf的组合应该是$(document.createElement('div'))，它应该是最快的？
@科尔基：就我个人而言，我宁愿放弃0.0001s的速度改进，以获得可维护和易于阅读的代码。
还要注意jquery将生成以大写形式导出的元素标记：stackoverflow.com/questions/2510702/&hellip；
document.createElement("div")对我来说比$("")更重要。
我认为"正确"的方式是$(''，和，imo，有更多的"意义"，因为很明显你正在创建一个节点。糟糕的是这样会破坏所有编辑器中突出显示的语法=(
@erik：不会破坏vim中突出显示的语法。
@erik：不会破坏emacs中突出显示的语法。
只是为了好玩：jspef.com/divtester-jquery-vs-create-element结论是jquery仍然允许您每秒执行100.000次，而createlement则允许执行180.000次。对我来说，额外的好处是我有了一个新的jquery元素，而不仅仅是我的div.so jquery>createlement。
@就我自己而言，运行它的频率似乎会产生不同的结果。CreateElement的表现好多了。所以这真的取决于你的用例。
@我自己又一次创造元素的表现好多了。所以这真的取决于你的用例。另外，我更新了代码以包含所有3个建议的方法，我认为jquery(document.createElement('div'))对于大多数情况来说是最好的，因为您可以同时获得jquery元素和部分createElement的性能。
@Mosselman是的，这就是讨论的内容，因为$('</div>')在功能上等同于$(document.createElement('div'))，而不是document.createElement('div')。
@尼克，我知道，我只是想分享我为测试它而创建的JSPERF链接。我知道我没有在对话中添加任何新内容。只是业余爱好。如果您转到jspef.com/divtester-jquery-vs-create-element/2，您将看到我使用clonenode()找到的另一个替代方法。不过速度不快。
@Nickf我想知道你是否可以为1.7.2更新这个列表，也许有一些改进？(没有我知道的，但它会保持列表的最新状态)
在这里，我们去："jakej jsperf.com / jQuery createelement vs
类似的结果nickf @真棒，太安静，：(
的最佳buildiong X浏览器，尝试所有的HTML作为字符串的第一，然后一个DOC的innerHTML是问，然后添加。
我有一个jQuery插件创建的document.createelement做空和achive本和保持所有jQuery DOM函数等github.com和jQuery创建zlomerovic / /
"erikescobedo不打破在VS 2010的语法高亮。
注对于跨浏览器VS </div>讨论：如果你是创建和支持HTML5元素(或IE8下面，我知道)，你必须在每天结束／include／($('

</header>'))或添加到IE8的默默的想拒绝它，html5shim适用。我还没有测试它是否有

。
这是一个小的额外的jsperf.com / jQuery jQuery 2.1.1：与普通的HTML
本upwork测试……那么什么是最好的方法吗？本.append(T)或美元(美元)？
它把我的案件16线2线的jQuery JavaScript相比。
有一个问题与使用$("")，on the Linux版本：A opera45控制台错误并将错过在闭幕的一天。其他浏览器和它的工作是精细的SOS。快速关闭标签($(""))解决问题，但坚持到$("</div>")单是一个内有最好的跨平台兼容性(AS，在jQuery文档)。在我看来，$(document.createElement('div'))是最优雅的方式，创建一个单元素。
总的来说，如果你需要一些元素var test = document.createElement('span'); $(test);是略快。当然，跳过jQuery完全是最快的。jsbench与更新。

简单地提供要添加到jquery构造函数中的元素的html，$()将从新构建的html返回jquery对象，适合使用jquery的append()方法附加到dom中。

例如：

1 2	var t = $("<table cellspacing='0' class='text'></table>"); $.append(t);

然后，如果您愿意，可以通过编程方式填充此表。

这使您能够指定任何您喜欢的任意HTML，包括类名或其他属性，这些属性可能比使用createElement更简洁，然后通过JS设置cellSpacing和className等属性。

相关讨论

创建新的DOM元素是jQuery()方法的核心功能，请参见：

http://api.jquery.com/jquery/创建新元素
特别是http://api.jquery.com/jquery/example-1-1

相关讨论

我是这样做的：

1
2
3
4

$('',{
text: 'Div text',
class: 'className'
}).appendTo('#parentDiv');

由于jQuery1.8，使用$.parseHTML()创建元素是更好的选择。

有两个好处：

1.如果使用旧方法，可能类似于$(string)，jquery将检查字符串，以确保要选择HTML标记或创建新元素。通过使用$.parseHTML()，您告诉jquery您想要显式地创建一个新元素，这样性能可能会更好一些。

2.更重要的是，如果使用旧方法，您可能会遭受跨站点攻击(更多信息)。如果你有类似的东西：

1 2	var userInput = window.prompt("please enter selector"); $(userInput).hide();

坏人可以输入

虽然这是一个非常古老的问题，但我认为最好用最新的信息来更新它；

因为jquery 1.8有一个jquery.parsehtml()函数，它现在是创建元素的首选方法。此外，通过$('(html code goes here)')解析HTML也存在一些问题，例如，官方jquery网站在其发行说明中提到了以下内容：

Relaxed HTML parsing: You can once again have leading spaces or
newlines before tags in $(htmlString). We still strongly advise that
you use $.parseHTML() when parsing HTML obtained from external
sources, and may be making further changes to HTML parsing in the
future.

与实际问题相关，前提是示例可以翻译为：

1
2
3
4
5
6
7

this.$OuterDiv = $($.parseHTML(''))
.hide()
.append($($.parseHTML('<table></table>'))
.attr({ cellSpacing : 0 })
.addClass("text")
)
;

不幸的是，这比仅使用$()不太方便，但它提供了更多的控制，例如，您可以选择排除脚本标记(但它会留下像onclick这样的内联脚本)：

1
2
3
4
5

> $.parseHTML('')
[??]

> $.parseHTML('', document, true)
[??, ??]

此外，这里还有一个根据新现实调整的最高答案的基准：

JSBN链路

jQuery 1.9-1

1
2
3
4
5

$.parseHTML: 88ms
$($.parseHTML): 240ms
: 138ms
: 143ms
createElement: 64ms

看起来parseHTML比$()更接近createElement，但是在将结果包装到新的jquery对象中之后，所有的提升都消失了。

1	var mydiv = $('') // also works

1 2	var div = $(''); div.append('Hello World!');

是在jquery中创建DIV元素的最短/最简单的方法。

我刚刚为它制作了一个小的jquery插件：https://github.com/ern0/jquery.create

它遵循您的语法：

1	var myDiv = $.create("div");

可以将dom节点id指定为第二个参数：

1	var secondItem = $.create("div","item2");

严重吗？不，但是这个语法比$(")好，而且它对这笔钱来说是一个很好的价值。

我是一个新的jquery用户，从domassistantcontent-module.php切换到domassistantcontent-module.php。

我的插件更简单，我认为通过链接方法添加属性和内容更好：

1	$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

此外，这是一个很好的例子，一个简单的jquery插件(第100个)。

一切都很直接！这里有几个简单的例子…

1	var $example = $( XMLDocRoot );

1
2
3
4
5
6
7

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

1	var $example.find('parent > child').append( $element );

开箱即用的jquery没有等效的createElement。实际上，jquery的大部分工作都是在内部使用innerhtml而不是纯DOM操作完成的。正如亚当上面提到的，这就是你如何获得类似的结果。

还有一些插件可以在innerhtml上使用dom，比如appenddom、domec和flydom等等。性能方面，本地jquery仍然是性能最高的(主要是因为它使用innerhtml)

相关讨论