javascript - jQuery document.createElement等价？(jQuery document.createElement equivalent?)

Question

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.

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

I would like to know if there is a better way to do this using jQuery.

(我想知道是否有更好的方法来使用jQuery。)

I've been experimenting with:

(我一直在尝试：)

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

But I'm not sure if this is any better.

(但我不确定这是否更好。)

  ask by Rob Stevenson-Leggett translate from so

Answer 1

here's your example in "one" line.

(这是你在“一”行中的例子。)

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

---

Update : I thought I'd update this post since it still gets quite a bit of traffic.

(更新 ：我认为我会更新这篇文章，因为它仍然会获得相当多的流量。)

In the comments below there's some discussion about $("<div>") vs $("<div></div>") vs $(document.createElement('div')) as a way of creating new elements, and which is "best".

(在下面的评论中，讨论了$("<div>") vs $("<div></div>") vs $(document.createElement('div'))作为创建新元素的方法，以及这是“最好的”。)

I put together a small benchmark , and here's roughly the results of repeating the above options 100,000 times:

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

jQuery 1.4, 1.5, 1.6

(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

(jQuery 1.3)

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

(jQuery 1.2)

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

I think it's no big surprise, but document.createElement is the fastest method.

(我认为这并不奇怪，但document.createElement是最快的方法。)

Of course, before you go off and start refactoring your entire codebase, remember that the differences we're talking about here (in all but the archaic versions of jQuery) equate to about an extra 3 milliseconds per thousand elements .

(当然，在你开始重构你的整个代码库之前，请记住我们在这里讨论的差异（除了jQuery的古老版本之外的所有版本）相当于每千个元素额外增加3毫秒。)

Update 2

(更新2)

Updated for jQuery 1.7.2 and put the benchmark on JSBen.ch which is probably a bit more scientific than my primitive benchmarks, plus it can be crowdsourced now!

(针对jQuery 1.7.2进行了更新，并将基准测试放在JSBen.ch上，这可能比我原始的基准测试更加科学，而且现在可以进行众包！)

http://jsben.ch/#/ARUtz

(http://jsben.ch/#/ARUtz)