jQuery document.createElement是否等价？
我正在重构一些旧的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
但我不确定这是否更好。
这是你在“一行”的例子。
this.$OuterDiv = $('<div></div>') .hide() .append($('<table></table>') .attr({ cellSpacing : 0 }) .addClass("text") ) ;
更新 ：我以为我会更新这个post，因为它仍然有相当的stream量。 在下面的注释中，有一些讨论关于$("<div>") vs $("<div></div>") vs $(document.createElement('div'))作为创build新元素的一种方法，这是“最好的”。
我把一个小基准放在一起，这里大致是重复上述选项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
我认为这不是什么大惊喜，但document.createElement是最快的方法。 当然，在你开始重构你的整个代码库之前，记住我们在这里讨论的差异（除了jQuery的所有版本之外）等同于每千个元素额外的3毫秒。
更新2
更新了jQuery 1.7.2，并将基准放在JSBen.ch上，这可能比我原始的基准testing更科学一些，再加上它现在可以被众包了！
简单地提供要添加到jQuery构造函数$()的元素的HTML将从新build的HTML中返回一个jQuery对象，适用于使用jQuery的append()方法附加到DOM中。
例如：
var t = $("<table cellspacing='0' class='text'></table>"); $.append(t);
如果你愿意的话，你可以通过编程来填充这个表格。
这使您能够指定任何您喜欢的任意HTML，包括类名或其他属性，您可能会发现它比使用createElement更简洁，然后通过JS设置像cellSpacing和className这样的属性。
创build新的DOM元素是jQuery()方法的核心function，请参阅：
干杯。
自从jQuery1.8 ，使用$.parseHTML()创build元素是一个更好的select。
有两个好处：
1.如果您使用旧的方式，可能是$(string) ，jQuery将检查string，以确保您要select一个HTML标记或创build一个新的元素。 通过使用$.parseHTML() ，你告诉jQuery你想明确地创build一个新元素，所以性能可能会好一点。
2.更重要的是，如果你使用旧的方式，你可能会遭受跨站点攻击（ 更多信息 ）。 如果你有这样的东西：
var userInput = window.prompt("please enter selector"); $(userInput).hide();
坏人可以input<script src="xss-attach.js"></script>来挑逗你。 幸运的是，。 $.parseHTML()避免了你的这个尴尬：
var a = $('<div>') // a is [<div></div>] var b = $.parseHTML('<div>') // b is [<div></div>] $('<script src="xss-attach.js"></script>') // jQuery returns [<script src="xss-attach.js"></script>] $.parseHTML('<script src="xss-attach.js"></script>') // jQuery returns []
不过，请注意， a是一个jQuery对象，而b是一个html元素：
a.html('123') // [<div>123</div>] b.html('123') // TypeError: Object [object HTMLDivElement] has no method 'html' $(b).html('123') // [<div>123</div>]
我觉得使用document.createElement('div')与jQuery一起更快：
$( document.createElement('div') ,{ text: 'Div text', 'class': 'className' }).appendTo('#parentDiv');
我这样做：
$('<div/>',{ text: 'Div text', class: 'className' }).appendTo('#parentDiv');
虽然这是一个非常古老的问题，但我认为用最近的信息来更新是很好的。
由于jQuery 1.8有一个jQuery.parseHTML（）函数，现在是创build元素的首选方法。 另外，通过$('(html code goes here)')parsingHTML也存在一些问题，比如官方的jQuery网站在他们的一个版本说明中提到了以下内容：
宽松的HTMLparsing：您可以在$（htmlString）中的标签之前再次具有前导空格或换行符。 我们仍然强烈build议您在parsing从外部源获得的HTML时使用$ .parseHTML（），并且可能在将来进一步更改HTMLparsing。
为了与实际问题相关，提供的例子可以被翻译为：
this.$OuterDiv = $($.parseHTML('<div></div>')) .hide() .append($($.parseHTML('<table></table>')) .attr({ cellSpacing : 0 }) .addClass("text") ) ;
不幸的是，这比使用$()更不方便，但它给了你更多的控制权，例如你可以select排除脚本标签（它会留下像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对象
var mydiv = $('<div />') // also works
var div = $('<div/>'); div.append('Hello World!');
是在jQuery中创buildDIV元素的最简单/最简单的方法。
这一切都非常简单！ 这里有几个简单的例子
var $example = $( XMLDocRoot );
var $element = $( $example[0].createElement('tag') ); // Note the [0], which is the root $element.attr({ id: '1', hello: 'world' });
var $example.find('parent > child').append( $element );
我刚刚做了一个小的jQuery插件： https ： //github.com/ern0/jquery.create
它遵循你的语法：
var myDiv = $.create("div");
DOM节点ID可以被指定为第二个参数：
var secondItem = $.create("div","item2");
这是严重吗？ 但是，这个语法比$（“<div> </ div>”）要好，这对于这个钱来说是非常好的价值。
我是一个新的jQuery用户，从具有类似function的DOMAssistant切换： http : //www.domassistant.com/documentation/DOMAssistantContent-module.php
我的插件更简单，我认为attrs和内容通过链接方法添加更好：
$("#container").append( $.create("div").addClass("box").html("Hello, world!") );
此外，这是一个简单的jQuery插件（第100个）的一个很好的例子。
开箱即用的jQuery没有相应的createElement。 事实上，大部分jQuery的工作都是在内部使用innerHTML完成纯DOM操作。 正如亚当在上面提到的，这是你如何能够达到类似的结果。
还有一些插件可以在innerHTML上使用DOM，比如appendDOM ， DOMEC和FlyDOM等等。 性能明智的本地jquery仍然是最高性能的（主要因为它使用innerHTML）
