Ich überarbeite alten JavaScript-Code und es wird viel DOM manipuliert.
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 besser ist.
Antworten:
Hier ist Ihr Beispiel in der Zeile "Eins".
Update : Ich dachte, ich würde diesen Beitrag aktualisieren, da er immer noch ziemlich viel Verkehr hat. In den Kommentaren unten wird über
$("<div>")
vs$("<div></div>")
vs diskutiert, um$(document.createElement('div'))
neue Elemente zu erstellen, und das ist "am besten".Ich habe einen kleinen Benchmark zusammengestellt , und hier sind ungefähr die Ergebnisse der 100.000-maligen Wiederholung der oben genannten Optionen:
jQuery 1.4, 1.5, 1.6
jQuery 1.3
jQuery 1.2
Ich denke, es ist keine große Überraschung, aber es
document.createElement
ist die schnellste Methode. Denken Sie natürlich daran, dass die Unterschiede, über die wir hier sprechen (mit Ausnahme der archaischen Versionen von jQuery), etwa 3 Millisekunden pro tausend Elemente entsprechen , bevor Sie mit der Überarbeitung Ihrer gesamten Codebasis beginnen .Update 2
Aktualisiert für jQuery 1.7.2 und setzen Sie den Benchmark,
JSBen.ch
der wahrscheinlich etwas wissenschaftlicher ist als meine primitiven Benchmarks. Außerdem kann er jetzt Crowdsourcing-fähig sein!http://jsben.ch/#/ARUtz
quelle
$('div')
der optisch sehr ähnlich ist, aber funktional voneinander abweicht.$(document.createElement('div'))
und es sollte die schnellste sein?Durch einfaches Bereitstellen des HTML-Codes von Elementen, die Sie einem jQuery-Konstruktor hinzufügen möchten,
$()
wird ein jQuery-Objekt aus neu erstelltem HTML zurückgegeben, das mit derappend()
Methode von jQuery an das DOM angehängt werden kann.Zum Beispiel:
Sie können diese Tabelle dann programmgesteuert füllen, wenn Sie dies wünschen.
Auf diese Weise können Sie beliebiges HTML angeben, einschließlich Klassennamen oder anderer Attribute, die Sie möglicherweise prägnanter finden, als
createElement
Attribute wiecellSpacing
undclassName
über JS zu verwenden und dann festzulegen .quelle
$(htmlStr)
wird implementiert alsdocument.createElement("div").innerHTML = htmlStr
. Mit anderen Worten, es wird der HTML-Parser des Browsers aufgerufen. Fehlerhaftes HTML bricht im IE anders als in anderen Browsern.get
Funktion, die das native DOM-Element zurückgibt. (Ich weiß, dass dieses Thema alt ist, aber ich füge es als Referenz hinzu. ;-))[dom element].appendChild($('<html>')[0]);
Das Erstellen neuer DOM-Elemente ist ein Kernmerkmal der
jQuery()
Methode, siehe:quelle
$('<a>')
ist ungooglable!Ich mache das so:
quelle
da die
jQuery1.8
Verwendung$.parseHTML()
zum Erstellen von Elementen eine bessere Wahl ist.Es gibt zwei Vorteile:
1.Wenn Sie den alten Weg verwenden, der etwa so aussieht
$(string)
, überprüft jQuery die Zeichenfolge, um sicherzustellen, dass Sie ein HTML-Tag auswählen oder ein neues Element erstellen möchten. Mit verwenden$.parseHTML()
Sie jQuery, dass Sie explizit ein neues Element erstellen möchten, damit die Leistung möglicherweise etwas besser ist.2. Viel wichtiger ist, dass Sie unter Cross-Site-Angriffen leiden können ( weitere Informationen ), wenn Sie den alten Weg verwenden. wenn du so etwas hast wie:
Ein Bösewicht kann etwas eingeben
<script src="xss-attach.js"></script>
, um dich zu ärgern.$.parseHTML()
Vermeiden Sie zum Glück diese Verlegenheit für Sie:Beachten Sie jedoch, dass
a
es sich um ein jQuery-Objekt handelt, währendb
es sich um ein HTML-Element handelt:quelle
parseHTML
es gut für HTML ist, das aus externen Quellen stammt, aber dass "der ganze Schub weg ist, nachdem die Ergebnisse in ein neues jQuery-Objekt verpackt wurden ". Das heißt, wenn Sie die Erstellung eines neuen, in jQuery eingeschlossenen HTML-Elements fest codieren möchten,$("<div>stuff</div>")
scheint der Stil immer noch zu gewinnen.AKTUALISIEREN
Ab den neuesten Versionen von jQuery weist die folgende Methode keine Eigenschaften zu, die im zweiten Objekt übergeben wurden
Vorherige Antwort
Ich fühle mich
document.createElement('div')
zusammen mitjQuery
ist schneller:quelle
Obwohl dies eine sehr alte Frage ist, dachte ich, es wäre schön, sie mit aktuellen Informationen zu aktualisieren.
Seit jQuery 1.8 gibt es eine jQuery.parseHTML () -Funktion, die jetzt eine bevorzugte Methode zum Erstellen von Elementen ist. Außerdem gibt es einige Probleme beim Parsen von HTML über eine
$('(html code goes here)')
offizielle jQuery-Website, auf der beispielsweise in einem ihrer Versionshinweise Folgendes erwähnt wird :Um sich auf die eigentliche Frage zu beziehen, könnte das bereitgestellte Beispiel übersetzt werden in:
Dies ist leider weniger bequem als die Verwendung von nur
$()
, bietet Ihnen jedoch mehr Kontrolle. Sie können beispielsweise Skript-Tags ausschließen (es bleiben jedoch Inline-Skripte wie folgtonclick
):Hier ist auch ein Benchmark aus der Top-Antwort, angepasst an die neue Realität:
JSbin Link
jQuery 1.9.1
Es sieht so aus, als wäre
parseHTML
es viel nähercreateElement
als$()
, aber der ganze Boost ist weg, nachdem die Ergebnisse in ein neues jQuery-Objekt eingeschlossen wurdenquelle
quelle
Ist der kürzeste / einfachste Weg, um ein DIV-Element in jQuery zu erstellen.
quelle
Ich habe gerade ein kleines jQuery-Plugin dafür erstellt: https://github.com/ern0/jquery.create
Es folgt Ihrer Syntax:
Die DOM-Knoten-ID kann als zweiter Parameter angegeben werden:
Ist es ernst? Nein. Aber diese Syntax ist besser als $ ("<div> </ div>") und bietet ein sehr gutes Preis-Leistungs-Verhältnis.
Ich bin ein neuer jQuery-Benutzer, der von DOMAssistant wechselt und eine ähnliche Funktion hat: http://www.domassistant.com/documentation/DOMAssistantContent-module.php
Mein Plugin ist einfacher, ich denke, Attrs und Inhalte lassen sich besser durch Verkettungsmethoden hinzufügen:
Es ist auch ein gutes Beispiel für ein einfaches jQuery-Plugin (das 100.).
quelle
Es ist alles ziemlich einfach! Hier ein paar kurze Beispiele ...
quelle
In früheren Antworten nicht erwähnt, daher füge ich ein Arbeitsbeispiel zum Erstellen von Elementelementen mit der neuesten jQuery hinzu, auch mit zusätzlichen Attributen wie Inhalt, Klasse oder Onclick-Rückruf:
quelle
jQuery out of the box entspricht nicht einem createElement. Tatsächlich wird der Großteil der Arbeit von jQuery intern mit innerHTML über reine DOM-Manipulation erledigt. Wie Adam oben erwähnt hat, können Sie auf diese Weise ähnliche Ergebnisse erzielen.
Es gibt auch Plugins, die das DOM über innerHTML verwenden, wie appendDOM , DOMEC und FlyDOM, um nur einige zu nennen. In Bezug auf die Leistung ist die native Abfrage immer noch die leistungsfähigste (hauptsächlich, weil sie innerHTML verwendet).
quelle