it-swarm.com.de

Entspricht jQuery document.createElement?

Ich überarbeite einen alten JavaScript-Code und es wird viel an DOM-Manipulationen gearbeitet.

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 nicht sicher, ob das besser ist.

1208

hier ist Ihr 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 gibt. In den Kommentaren unten wird etwas über $("<div>") vs $("<div></div>") vs $(document.createElement('div')) diskutiert, um neue Elemente zu erstellen.

Ich habe eine kleine Benchmark zusammengestellt, und hier sind ungefähr die Ergebnisse der 100.000-fachen Wiederholung 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. Denken Sie natürlich daran, dass die Unterschiede, von denen wir hier sprechen (mit Ausnahme der archaischen Versionen von jQuery), etwa 3 Millisekunden pro Tausend mehr betragen, bevor Sie mit der Umgestaltung Ihrer gesamten Codebasis beginnen Elemente .

Update 2

Aktualisiert für jQuery 1.7.2 und stelle den Benchmark auf JSBen.ch, der wahrscheinlich etwas wissenschaftlicher ist als meine primitiven Benchmarks. Außerdem kann er jetzt per Crowdsourcing bezogen werden!

http://jsben.ch/#/ARUtz

1259
nickf

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-Code zurückgeben, das mit der append() -Methode von jQuery in das DOM eingefügt werden kann.

Zum Beispiel:

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

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

Dies gibt Ihnen die Möglichkeit, beliebiges HTML anzugeben, einschließlich Klassennamen oder anderer Attribute, die Sie möglicherweise präziser finden als die Verwendung von createElement und dann Attribute wie cellSpacing und className über JS.

133
Adam Bellaire

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

68
abernier

Ich mache das so:

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

seit jQuery1.8 ist die Verwendung von $.parseHTML() zum Erstellen von Elementen die bessere Wahl.

es gibt zwei Vorteile:

1.Wenn Sie die alte Methode verwenden, bei der es sich möglicherweise um $(string) handelt, überprüft jQuery die Zeichenfolge, um sicherzustellen, dass Sie ein HTML-Tag auswählen oder ein neues Element erstellen möchten. Mit $.parseHTML() teilen Sie jQuery mit, dass Sie ein neues Element explizit erstellen möchten, sodass die Leistung möglicherweise etwas besser ist.

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

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

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

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

Beachten Sie jedoch, dass a ein jQuery-Objekt ist, während b ein HTML-Element ist:

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

UPDATE

Ab den neuesten Versionen von jQuery weist die folgende Methode keine Eigenschaften zu, die im zweiten Objekt übergeben wurden

Vorherige Antwort

Ich habe das Gefühl, dass die Verwendung von document.createElement('div') zusammen mit jQuery schneller ist:

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

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 über $('(html code goes here)'), beispielsweise erwähnt die offizielle jQuery-Website Folgendes in einer ihrer Versionshinweise :

Entspanntes HTML-Parsen: Sie können in $ (htmlString) wieder führende Leerzeichen oder Zeilenumbrüche vor Tags setzen. Es wird weiterhin dringend empfohlen, dass Sie $ .parseHTML () verwenden, wenn Sie HTML-Code analysieren, der aus externen Quellen stammt. Möglicherweise werden Sie in Zukunft weitere Änderungen am HTML-Code vornehmen.

Um sich auf die eigentliche Frage zu beziehen, könnte das bereitgestellte 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 nur $(), bietet Ihnen jedoch mehr Kontrolle, zum Beispiel können Sie Skript-Tags ausschließen (es verbleiben 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>​]

Hier ist auch ein Benchmark von der Top-Antwort, angepasst an die neue Realität:

JSbin Link

jQuery 1.9.1

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

Es sieht so aus, als ob parseHTMLcreateElement viel näher ist als $(), aber der gesamte Boost ist weg, nachdem die Ergebnisse in ein neues jQuery-Objekt eingebunden wurden

28
siergiej
var mydiv = $('<div />') // also works
12
Shimon Doodkin
var div = $('<div/>');
div.append('Hello World!');

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

7
AcidicChip

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

Es 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. Diese Syntax ist jedoch 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, dass es besser ist, Attribute und Inhalte durch Verkettungsmethoden hinzuzufügen:

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

Es ist auch ein gutes Beispiel für ein einfaches jQuery-Plugin (das 100.).

5
ern0

Es ist alles ziemlich einfach! Hier ein paar kurze 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 );
5
Randy

In den vorherigen Antworten nicht erwähnt, füge ich daher ein Arbeitsbeispiel zum Erstellen von Elementelementen mit der neuesten jQuery hinzu, auch mit zusätzlichen Attributen wie Inhalt, Klasse oder On-Click-Rückruf:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)
.click-me {
  background-color: lightgrey
}
<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
0