jQuery document.createElement等价？

Question

我正在重构一些旧的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

但我不确定这是否更好.

Answer 1

这是你在"一"行中的例子.

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

更新:我认为我会更新这篇文章,因为它仍然会获得相当多的流量.在下面的评论中,有一些关于$("<div>")vs $("<div></div>")vs $(document.createElement('div'))作为创建新元素的方式的讨论,这是"最好的".

我整理了一个小基准,这里大致是重复上述选项100,000次的结果:

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上,这可能比我原始的基准测试更加科学,而且现在可以进行众包!

http://jsben.ch/#/ARUtz

Answer 2

简单地提供要添加到jQuery构造函数的元素的HTML $()将从新构建的HTML返回一个jQuery对象,适合使用jQuery的append()方法附加到DOM中.

例如:

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

然后,如果您愿意,可以以编程方式填充此表.

这使您能够指定任何您喜欢的任意HTML,包括类名或其他属性,您可能会发现它们比使用更简洁createElement,然后设置类似cellSpacing和className通过JS 等属性.

Answer 3

创建新的DOM元素是该jQuery()方法的核心功能,请参阅:

• http://api.jquery.com/jQuery/#creating-new-elements
• 特别是http://api.jquery.com/jQuery/#example-1-1

Answer 4

我这样做:

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

Answer 5

因为jQuery1.8,使用$.parseHTML()创建元素是更好的选择.

有两个好处:

1.如果您使用旧的方式,可能是类似的$(string),jQuery将检查字符串以确保您要选择html标记或创建新元素.通过使用$.parseHTML(),您告诉jQuery您要明确地创建一个新元素,因此性能可能会好一些.

2.更重要的是,如果你使用旧的方式,你可能会受到跨站点攻击(更多信息).如果你有类似的东西:

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

一个坏人可以输入<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>?]

Answer 6

UPDATE

从jQuery的最新版本开始,以下方法不会分配在第二个Object中传递的属性

以前的答案

我觉得和它document.createElement('div')一起使用jQuery更快:

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

Answer 7

虽然这是一个非常古老的问题,但我认为用最新信息更新它会很好;

从jQuery 1.8开始,有一个jQuery.parseHTML()函数,它现在是创建元素的首选方法.另外,解析HTML有一些问题$('(html code goes here)'),例如官方jQuery网站在他们的一个发行说明中提到了以下内容:

轻松的HTML解析:您可以在$(htmlString)中的标记之前再次使用前导空格或换行符.我们仍强烈建议您在解析从外部源获取的HTML时使用$ .parseHTML(),并且可能在将来对HTML解析进行进一步更改.

为了与实际问题相关,提供的示例可以转换为:

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

不幸的是$(),它比使用just更方便,但它可以让你获得更多的控制权,例如你可以选择排除脚本标签(它会留下像这样的内联脚本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 Link

jQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

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

Answer 8

var mydiv = $('<div />') // also works

Answer 9

var div = $('<div/>');
div.append('Hello World!');

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

Answer 10

我刚刚为它制作了一个小的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

我的插件更简单,我认为通过链接方法添加更好的内容和内容:

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

此外,它是一个简单的jQuery插件(第100个)的一个很好的例子.