Frage jQuery document.createElement entspricht?


Ich reformiere etwas alten JavaScript-Code und es gibt eine Menge DOM-Manipulation.

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 eine bessere Möglichkeit gibt, dies mit jQuery zu tun. Ich habe mit experimentiert:

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

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


1134
2017-11-06 12:26


Ursprung


Antworten:


Hier ist dein Beispiel in "einer" Zeile.

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

Aktualisieren: Ich dachte, ich würde diesen Beitrag aktualisieren, da es immer noch ziemlich viel Verkehr bekommt. In den Kommentaren unten gibt es einige Diskussionen darüber $("<div>") vs $("<div></div>") vs $(document.createElement('div')) als eine Möglichkeit, neue Elemente zu schaffen, und das ist "das Beste".

Ich stelle mich zusammen ein kleiner Maßstab, und hier sind ungefähr die Ergebnisse der 100.000 Wiederholungen der obigen 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 loslegen und mit dem Refactoring Ihrer gesamten Codebasis beginnen, erinnern Sie sich natürlich daran, dass die Unterschiede, über die wir hier sprechen (in allen außer den archaischen Versionen von jQuery), etwa drei Millisekunden mehr betragen pro tausend Elemente.

Update 2

Aktualisiert für jQuery 1.7.2 und setze den Benchmark auf JSBen.ch, der wahrscheinlich ein bisschen wissenschaftlicher als meine primitiven Benchmarks ist, und es kann jetzt Crowdsourcing sein!

http://jsben.ch/#/ARUtz


1199
2017-11-06 12:34



Liefern Sie einfach den HTML-Code der Elemente, die Sie einem jQuery-Konstruktor hinzufügen möchten $() gibt ein jQuery-Objekt aus neu erstelltem HTML zurück, das mit jQuery in das DOM eingefügt werden kann append() Methode.

Beispielsweise:

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

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

Dies gibt Ihnen die Möglichkeit, jedes beliebige HTML, das Sie mögen, anzugeben, einschließlich Klassennamen oder andere Attribute, die Sie möglicherweise prägnanter finden als die Verwendung createElement und dann setzen Sie Attribute wie cellSpacing und className über JS.


123
2017-11-06 12:30



Das Erstellen neuer DOM - Elemente ist ein Kernmerkmal des jQuery() Methode, siehe:


62
2017-07-15 07:14



schon seit jQuery1.8verwenden $.parseHTML() Elemente zu erstellen ist eine bessere Wahl.

Es gibt zwei Vorteile:

1. Wenn Sie den alten Weg, der etwas wie sein kann, verwenden $(string)jQuery untersucht die Zeichenfolge, um sicherzustellen, dass Sie ein HTML-Tag auswählen oder ein neues Element erstellen möchten. Durch die Nutzung $.parseHTML(), Sie sagen jQuery, dass Sie ein neues Element explizit erstellen möchten, damit die Leistung ein wenig besser sein kann.

2. viel wichtiger ist, dass Sie von Cross Site Attacken (Mehr Info) wenn du den alten Weg benutzt. wenn du etwas hast wie:

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

Ein schlechter Typ kann eingeben <script src="xss-attach.js"></script> um dich zu ärgern. glücklicherweise, $.parseHTML() vermeide diese peinlichkeit für dich:

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 dies jedoch 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>​]

39
2018-01-24 03:01



Ich mache das so:

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

35
2017-11-24 18:07



Ich fühle mich gebrauchen document.createElement('div') zusammen mit jQuery ist schneller:

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

34
2018-06-18 05:53



Obwohl dies eine sehr alte Frage ist, dachte ich, es wäre schön, sie mit den neuesten Informationen zu aktualisieren;

Seit jQuery 1.8 gibt es ein jQuery.parseHTML () Funktion, die jetzt eine bevorzugte Art ist, Elemente zu erstellen. Außerdem gibt es einige Probleme beim Parsen von HTML via $('(html code goes here)')Beispielsweise erwähnt offizielle jQuery-Website die folgenden in einer ihrer Versionshinweise:

Entspanntes HTML-Parsing: Sie können wieder führende Leerzeichen oder haben   Zeilenumbrüche vor Tags in $ (htmlString). Wir empfehlen dies immer noch sehr   Sie verwenden $ .parseHTML () beim Analysieren von HTML, das von external erhalten wurde   Quellen und möglicherweise weitere Änderungen an HTML-Parsing in der   Zukunft.

Um sich auf die eigentliche Frage zu beziehen, könnte das Beispiel folgendermaßen übersetzt werden:

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

das ist leider weniger bequem als nur zu verwenden $(), aber es gibt Ihnen mehr Kontrolle, zum Beispiel können Sie auswählen, Skript - Tags auszuschließen (es wird Inline - Skripte wie verlassen onclick obwohl):

> $.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>​]

Auch hier ist ein Benchmark von der oberen Antwort an die neue Realität angepasst:

JSbin Link

jQuery 1.9.1

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

Es sieht aus wie parseHTML ist viel näher dran createElement als $(), aber der gesamte Boost ist verschwunden, nachdem die Ergebnisse in ein neues jQuery-Objekt eingeschlossen wurden


25
2017-09-29 19:01