Preferowany sposób tworzenia nowego elementu za pomocą jQuery

227

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?

Ashwin
źródło
8
To tylko kwestia ponownego użycia. Twoja decyzja.
Roko C. Buljan
@gdoron przez wielokrotnego użytku Mam na myśli: jeśli masz element w zmiennej, możesz ponownie wywołać tę zmienną gdziekolwiek potrzebujesz, tak jak w twoim przykładzie.
Roko C. Buljan
2
Dlaczego .html, ale nie .appendw drugim przypadku?
Inżynier
@ Engineer - Przepraszam, to był błąd tutaj. Poprawiłem to.
Ashwin
Myślałem, że ta druga metoda jest szybsza pod względem szybkości wykonania, ale pierwsza wydaje się (10% ~ 40%) szybsza: jsperf.com/jquery-append-string-vs-append-jquery-reference
Fabrizio Calderan

Odpowiedzi:

339

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.

gdoron wspiera Monikę
źródło
10
$Moim zdaniem dobrą praktyką jest również rozpoczynanie nazw kolekcji jQuery od „ ”. Wystarczy zauważyć, że to, co zrobiłeś, nie wymaga $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");
Tabletek przeciwwybuchowych
Czy te znaki dolara są konieczne, czy literówka? $div. Nie widziałem wcześniej tej składni, ale jestem nowy w Jquery.
felwithe
Zawsze używam $ jest zmienną jest obiektem jquery, $ _ jeśli jest to kolekcja jQuery, a _var jeśli jest licznikiem. Zmienna dla zmiennych regularnych.
Casey
1
gdzie jest dokumentacja dla tego sposobu tworzenia elementu? $("<div>", {id: "foo", class: "a"});. Chcę wiedzieć, czy istnieją inne opcje
Saba Ahang
@gdoron, proszę, spójrz na moje pytanie stackoverflow.com/questions/35413044/…
Vixed
74

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

Niranjan Singh
źródło
Dzięki za link do odwołania do jQuery na temat tworzenia nowych elementów HTML . Tak trudno google za to.
Bob Stein
Lepiej to zrób: stackoverflow.com/a/43719563/383904
Roko C. Buljan
25

Znacznie bardziej ekspresyjny sposób,

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

Odniesienie: Dokumenty

Darszan
źródło
4
classpowinny być w cudzysłowie, zgodnie z dokumentacją (poprzez link Dokumentów powyżej): „Obiekt” nazwa klasy musi być cytowany w obiekcie, ponieważ jest to słowo zastrzeżone JavaScript, a „className” nie może być użyte, ponieważ odnosi się do właściwości DOM , a nie atrybut ”.
Isaac Gregson,
5

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

Alan Dong
źródło
2

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
});
Anuradha Mudalige
źródło
Dodałem cytaty. Jeśli nie podasz classcytatów, to po cichu zawiedzie i może doprowadzić do szaleństwa.
John Henckel
0

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.

jbabey
źródło
1
@Przy drugim podejściu możesz przez pomyłkę wymazać wszystkie pozostałe elementy potomne modyfikowanego kontenera: jsfiddle.net/jbabey/RBXq5/1
jbabey
0

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.

Pigułki przeciwwybuchowe
źródło
Och .. Nie chcę tutaj używać append;)
Ashwin
0

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

nabila_ahmed
źródło