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

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