Preferowany sposób tworzenia nowego elementu za pomocą jQuery

Mam 2 sposoby na utworzenie <div>użycia jQuery.

Zarówno:

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

Lub:

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

Jakie są wady korzystania z drugiego sposobu innego niż możliwość ponownego użycia?

Pierwsza opcja zapewnia większą elastyczność:

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

I oczywiście .html('*')zastępuje treść, podczas gdy .append('*')nie, ale myślę, że to nie było twoje pytanie.

Inną dobrą praktyką jest poprzedzanie zmiennych jQuery $:
Czy istnieje jakiś konkretny powód używania zmiennej $ z zmienną w jQuery

Umieszczenie cudzysłowów wokół "class"nazwy właściwości sprawi, że będzie ona bardziej kompatybilna z mniej elastycznymi przeglądarkami.

Osobiście uważam, że ważniejsze jest, aby kod był czytelny i edytowalny niż performant. Który z nich jest dla ciebie łatwiejszy do zrozumienia i powinien być tym, który wybierzesz dla powyższych czynników. Możesz to napisać jako:

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

I twoja pierwsza metoda jako:

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

Ale jeśli chodzi o czytelność; podejście jQuery jest moim ulubionym . Postępuj zgodnie z tymi przydatnymi sztuczkami jQuery, notatkami i najlepszymi praktykami

Znacznie bardziej ekspresyjny sposób,

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

Odniesienie: Dokumenty

Według oficjalnej dokumentacji jQuery

Aby utworzyć element HTML, $("<div/>")lub $("<div></div>")jest preferowany.

Następnie można użyć jednej appendTo, append, before, afteri etc ,. aby wstawić nowy element do DOM.

PS: jQuery wersja 1.11.x

Zgodnie z dokumentacją dla 3.4 , zaleca się stosowanie atrybutów z attr()metodą.

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

Poleciłbym pierwszą opcję, w której budujesz elementy za pomocą jQuery. drugie podejście po prostu ustawia właściwość innerHTML elementu na ciąg znaków, którym jest HTML, i jest bardziej podatny na błędy i mniej elastyczny.

Jeśli #boxjest pusty, nic, ale jeśli nie, to robią bardzo różne rzeczy. Ten pierwszy doda divjako ostatni węzeł potomny #box. Ten ostatni całkowicie zastępuje zawartość #boxpojedynczym pustym divtekstem i wszystkim.

Możliwe jest również utworzenie elementu div w następujący sposób:

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

dodaj klasę

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

może również wykonywać append()iappendChild()