javascript - create - jquery string to html




jQuery document.createElement entspricht? (9)

Das Erstellen neuer DOM-Elemente ist ein Kernelement der jQuery() -Methode, siehe:

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.


Es ist alles ziemlich geradlinig! Hier ein paar schnelle Beispiele ...

var $example = $( XMLDocRoot );
var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});
var $example.find('parent > child').append( $element );

Hier ist dein Beispiel in "einer" Zeile.

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

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

Ich habe einen kleinen Benchmark zusammengestellt , 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, denken Sie bitte daran, dass die Unterschiede, über die wir hier sprechen (in allen außer den archaischen Versionen von jQuery), etwa drei Millisekunden pro tausend Elemente entsprechen .

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!

jsben.ch/#/ARUtz


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

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

Ich mache das so:

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

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 eine jQuery.parseHTML Funktion, die jetzt eine bevorzugte Methode zum Erstellen von Elementen ist. Außerdem gibt es einige Probleme beim Parsen von HTML via $('(html code goes here)') , z. B. offizielle jQuery-Website erwähnt die folgenden in einer ihrer Versionshinweise :

Entspanntes HTML-Parsing: Sie können in $ (htmlString) wieder führende Leerzeichen oder Zeilenumbrüche vor Tags einfügen. Wir empfehlen Ihnen nach wie vor dringend, $ .parseHTML () zu verwenden, wenn Sie HTML-Code aus externen Quellen analysieren und in Zukunft weitere Änderungen am HTML-Parsing vornehmen.

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 praktisch als die Verwendung von $() , aber es gibt Ihnen mehr Kontrolle, zum Beispiel können Sie Skript-Tags ausschließen (es wird jedoch Inline-Skripte wie onclick ):

> $.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 so aus, als wäre parseHTML viel näher als $() , aber der gesamte Boost ist verschwunden, nachdem die Ergebnisse in ein neues jQuery-Objekt eingeschlossen wurden


Wenn Sie einfach den HTML-Code der Elemente angeben, die Sie einem jQuery-Konstruktor $() hinzufügen möchten, wird ein jQuery-Objekt aus neu erstelltem HTML zurückgegeben, das mit der append() -Methode von jQuery an das DOM angehängt werden kann.

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, beliebiges beliebiges HTML anzugeben, einschließlich Klassennamen oder anderer Attribute, die Sie möglicherweise knapper finden als createElement und dann Attribute wie cellSpacing und className über JS setzen.


jQuery hat standardmäßig kein createElement. In der Tat ist die Mehrheit der jQuery-Arbeit intern mit innerHTML über reine DOM-Manipulation gemacht. Wie Adam oben erwähnt, können Sie so ähnliche Ergebnisse erzielen.

Es gibt auch Plugins, die das DOM über innerHTML wie appendDOM , DOMEC und FlyDOM nur einige zu nennen. Leistungsmäßig ist die native jquery immer noch am leistungsstärksten (vor allem weil sie innerHTML verwendet)


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






dhtml