Die bevorzugte Methode zum Erstellen eines neuen Elements mit jQuery

227

Ich habe zwei Möglichkeiten, wie ich eine erstellen kann <div> VerwendungjQuery .

Entweder:

var div = $("<div></div>");
$("#box").append(div);

Oder:

$("#box").append("<div></div>");

Was sind die Nachteile der Verwendung des zweiten Weges außer der Wiederverwendbarkeit?

— Ashwin
quelle

8

Es ist nur eine Frage der Wiederverwendbarkeit. Ihr Anruf.

— Roko C. Buljan

@gdoron durch Wiederverwendbarkeit Ich meine: Wenn Sie ein Element in einer Variablen haben, können Sie diese Variable wie in Ihrem Beispiel überall dort aufrufen, wo Sie sie benötigen.

— Roko C. Buljan

2

Warum .html, aber nicht .appendim 2. Fall?

— Ingenieur

@Engineer - Sorry, das war hier ein Fehler. Ich habe das korrigiert.

— Ashwin

Ich dachte, die letztere Methode sei schneller in Bezug auf die Geschwindigkeitsausführung, aber die erste scheint (10% ~ 40%) schneller zu sein: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Fabrizio Calderan

339

Die erste Option bietet Ihnen mehr Flexibilität:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

Und natürlich .html('*')überschreibt der Inhalt, obwohl .append('*')dies nicht der Fall ist, aber ich denke, das war nicht Ihre Frage.

Eine weitere bewährte Methode besteht darin, Ihren jQuery-Variablen Folgendes voranzustellen $:
Gibt es einen bestimmten Grund für die Verwendung von $ with variable in jQuery?

Wenn Sie den "class"Eigenschaftsnamen in Anführungszeichen setzen , ist er mit weniger flexiblen Browsern kompatibler.

— Gdoron unterstützt Monica
quelle

10

$Meiner Meinung nach ist es auch eine gute Vorgehensweise, jQuery-Sammlungsnamen mit einem " " zu beginnen . Nur zu beachten, dass das, was Sie getan haben, nicht erfordert $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Explosion Pills

Sind diese Dollarzeichen notwendig oder ein Tippfehler? $div. Ich habe diese Syntax noch nie gesehen, bin aber neu bei Jquery.

— felwithe

Ich benutze immer das $ ist die Variable ist ein jquery-Objekt, $ _ wenn es eine jQuery-Auflistung ist und _var wenn es ein Zähler ist. Die Variable für reguläre Variablen.

— Casey

1

Wo ist die Dokumentation für diese Art der Elementerstellung? $("<div>", {id: "foo", class: "a"});. Ich möchte wissen, ob es andere Möglichkeiten dafür gibt

— Saba Ahang

@gdoron bitte, werfen Sie einen Blick auf meine Frage stackoverflow.com/questions/35413044/…

— Vixed

74

Ich persönlich denke, dass es wichtiger ist, dass der Code lesbar und bearbeitbar ist als performant. Welches Sie leichter sehen können und welches Sie für die oben genannten Faktoren auswählen sollten. Sie können es schreiben als:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

Und deine erste Methode als:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

Aber was die Lesbarkeit betrifft; Der jQuery-Ansatz ist mein Favorit . Befolgen Sie diese hilfreichen jQuery-Tricks, Hinweise und Best Practices

— Niranjan Singh
quelle

Vielen Dank für diesen Link zur jQuery-Referenz zum Erstellen neuer HTML-Elemente . So schwer zu googeln.

— Bob Stein

Besser wie folgt

— Roko C. Buljan

25

Viel ausdrucksstärker,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

Referenz: Docs

— Darshan
quelle

4

classsollte gemäß den Dokumenten in Anführungszeichen stehen (über den obigen Link "Dokumente"): "Der Name" class "muss im Objekt in Anführungszeichen gesetzt werden, da es sich um ein reserviertes JavaScript-Wort handelt, und" className "kann nicht verwendet werden, da es auf die DOM-Eigenschaft verweist , nicht das Attribut. "

— Isaac Gregson

5

Laut der offiziellen Dokumentation von jQuery

So erstellen Sie ein HTML-Element $("<div/>")oder$("<div></div>") wird bevorzugt.

Dann können Sie entweder appendTo, append, before,after und etc ,. um das neue Element in das DOM einzufügen.

PS: jQuery Version 1.11.x.

— Alan Dong
quelle

2

Gemäß der Dokumentation zu 3.4 wird es bevorzugt, Attribute mit attr()Methode zu verwenden.

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

— Anuradha Mudalige
quelle

Ich habe Zitate hinzugefügt. Wenn Sie keine classAnführungszeichen setzen, schlägt dies stillschweigend fehl und kann zu Wahnsinn führen.

— John Henckel

0

Ich würde die erste Option empfehlen, bei der Sie tatsächlich Elemente mit jQuery erstellen. Der zweite Ansatz setzt einfach die innerHTML-Eigenschaft des Elements auf eine Zeichenfolge, die zufällig HTML ist und fehleranfälliger und weniger flexibel ist.

— jbabey
quelle

1

@Ash mit dem zweiten Ansatz können Sie versehentlich alle anderen untergeordneten

— Elemente

0

Wenn #boxes leer ist, nichts, aber wenn es nicht ist, machen diese sehr unterschiedliche Dinge. Ersteres fügt einen divals letzten untergeordneten Knoten von hinzu #box. Letzteres ersetzt den Inhalt von vollständig #boxdurch ein einzelnes Leerzeichen div, Text und alles.

— Explosionspillen
quelle

Oh .. ich will hier nicht anhängen;)

— Ashwin

0

Es ist auch möglich, ein div-Element auf folgende Weise zu erstellen:

var my_div = document.createElement('div');

Klasse hinzufügen

my_div.classList.add('col-10');

kann auch durchführen append()undappendChild()

— nabila_ahmed
quelle