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

UPDATE

In den neuesten Versionen von jQuery weist die folgende Methode die im zweiten Objekt übergebenen Eigenschaften nicht zu

Vorherige Antwort

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

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

Answer 2

Obwohl dies eine sehr alte Frage ist, dachte ich, es wäre gut, sie mit aktuellen Informationen zu aktualisieren;

Seit jQuery 1.8 gibt es eine jQuery.parseHTML() Funktion, die jetzt eine bevorzugte Methode zur Erstellung von Elementen ist. Außerdem gibt es einige Probleme beim Parsen von HTML über $('(html code goes here)') Zum Beispiel wird auf der offiziellen jQuery-Website Folgendes erwähnt einer ihrer Versionshinweise :

Entspanntes HTML-Parsing: Sie können nun wieder führende Leerzeichen oder Zeilenumbrüche vor Tags in $(htmlString). Wir raten immer noch dringend, dass $.parseHTML() zu verwenden, wenn Sie HTML aus externen Quellen parsen Quellen erhalten haben, und werden in Zukunft möglicherweise weitere Änderungen am HTML-Parsing vornehmen. Zukunft vornehmen.

Um sich auf die eigentliche Frage zu beziehen, könnte das gegebene Beispiel wie folgt übersetzt werden:

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

was leider weniger bequem ist als die Verwendung von nur $() , aber es gibt Ihnen mehr Kontrolle, zum Beispiel können Sie Skript-Tags ausschließen (Inline-Skripte wie onclick allerdings):

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

Und hier ist ein Benchmark der ersten Antwort, angepasst an die neue Realität:

JSbin Link

jQuery 1.9.1

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

Es sieht so aus parseHTML ist viel näher an createElement als $() aber der ganze Schub ist weg, nachdem die Ergebnisse in ein neues jQuery-Objekt eingepackt wurden

Answer 3

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

Answer 4

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

Ist der kürzeste/einfachste Weg, um ein DIV-Element in jQuery zu erstellen.

Answer 5

Ich habe gerade ein kleines jQuery-Plugin dafür entwickelt: https://github.com/ern0/jquery.create

Er folgt Ihrer Syntax:

var myDiv = $.create("div");

Die DOM-Knoten-ID kann als zweiter Parameter angegeben werden:

var secondItem = $.create("div","item2");

Ist es ernst? Nein. Aber diese Syntax ist besser als $("<div></div>") und es ist ein sehr guter Wert für dieses Geld.

Ich bin ein neuer jQuery-Benutzer, Wechsel von DOMAssistant, die eine ähnliche Funktion hat: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Mein Plugin ist einfacher, ich denke, attrs und Inhalt ist besser, durch Verkettung von Methoden hinzufügen:

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

Außerdem ist es ein gutes Beispiel für ein einfaches jQuery-Plugin (das 100.).