Die bevorzugte Methode zum Erstellen eines neuen Elements mit jQuery

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?

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.

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

Viel ausdrucksstärker,

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

Referenz: Docs

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.

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
});

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.

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.

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()