jQuery document.createElement gleichwertig?

Question

Ich bin Refactoring einige alte JavaScript-Code und es gibt eine Menge von DOM-Manipulation geht auf.

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);

Ich würde gerne wissen, ob es einen besseren Weg gibt, dies mit jQuery zu tun. Ich habe experimentiert mit:

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

Aber ich bin mir nicht sicher, ob das hier besser ist.

Answer 1

Hier ist Ihr Beispiel in der Zeile "eine".

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

---

Update : Ich dachte, ich aktualisiere diesen Beitrag, da er immer noch recht häufig aufgerufen wird. In den Kommentaren unten gibt es eine Diskussion über $("<div>") gegen $("<div></div>") gegen $(document.createElement('div')) als eine Möglichkeit, neue Elemente zu schaffen, und welche die "beste" ist.

Ich stelle zusammen ein kleiner Richtwert und hier sind in etwa die Ergebnisse der 100.000-maligen Wiederholung der oben genannten Optionen:

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

Ich denke, es ist keine große Überraschung, aber document.createElement ist die schnellste Methode. Bevor Sie natürlich loslegen und Ihre gesamte Codebasis umgestalten, sollten Sie bedenken, dass die Unterschiede, über die wir hier sprechen (in allen außer den archaischen Versionen von jQuery), etwa 3 Millisekunden mehr ausmachen pro tausend Elemente .

---

Aktualisierung 2

Aktualisiert für jQuery 1.7.2 und setzen den Benchmark auf JSBen.ch was wahrscheinlich etwas wissenschaftlicher ist als meine primitiven Benchmarks, und außerdem kann es jetzt von der Allgemeinheit getragen werden!

http://jsben.ch/#/ARUtz

Answer 2

Geben Sie einfach den HTML-Code der Elemente an, die Sie einem jQuery-Konstruktor hinzufügen möchten $() gibt ein jQuery-Objekt aus neu erstelltem HTML zurück, das mit Hilfe von jQuery's "DOM" in den DOM eingefügt werden kann. append() méthode.

Zum Beispiel:

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

Sie können diese Tabelle dann programmatisch auffüllen, wenn Sie dies wünschen.

Dies gibt Ihnen die Möglichkeit, jeden beliebigen HTML-Code anzugeben, einschließlich Klassennamen oder andere Attribute, was Sie vielleicht prägnanter finden als die Verwendung von createElement und dann das Setzen von Attributen wie cellSpacing y className über JS.

Answer 3

So geht es mir auch:

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

Answer 4

Das Erstellen neuer DOM-Elemente ist eine Kernfunktion der jQuery() Methode, siehe:

• http://api.jquery.com/jQuery/#creating-new-elements
• und insbesondere http://api.jquery.com/jQuery/#example-1-1

Answer 5

Seit jQuery1.8 , mit $.parseHTML() um Elemente zu erstellen, ist eine bessere Wahl.

Es gibt zwei Vorteile:

1.wenn Sie die alte Methode verwenden, die etwa so aussehen könnte $(string) wird jQuery die Zeichenkette untersuchen, um sicherzustellen, dass Sie ein HTML-Tag auswählen oder ein neues Element erstellen möchten. Durch die Verwendung von $.parseHTML() Wenn Sie diese Option wählen, teilen Sie jQuery mit, dass Sie explizit ein neues Element erstellen möchten, so dass die Leistung ein wenig besser sein kann.

2. viel wichtiger ist, dass Sie unter Cross-Site-Attacken leiden können ( mehr Infos ), wenn Sie die alte Methode verwenden. wenn Sie etwas wie:

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

ein Bösewicht kann eingeben <script src="xss-attach.js"></script> um dich zu ärgern. Zum Glück, $.parseHTML() diese Peinlichkeit für Sie zu vermeiden:

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 []

Bitte beachten Sie jedoch, dass a ist ein jQuery-Objekt, während b ist ein html-Element:

a.html('123')
// [<div>123</div>]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>123</div>]