JQuery ile yeni bir öğe oluşturmanın tercih edilen yolu

227

Ben oluşturabilir 2 yolu var <div>kullanarak jQuery.

Ya:

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

Veya:

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

Yeniden kullanılabilirlik dışında ikinci yol kullanmanın dezavantajları nelerdir?

— Ashwin
kaynak

8

Sadece yeniden kullanılabilirlik meselesi. Çağrınız.

— Roko C. Buljan

@gdoron by reusability Yani: Eğer bir değişkenin içinde bir elemanınız varsa, o varyantı, örneğin örneğiniz gibi, ihtiyacınız olan her yerde yeniden çağırabilirsiniz.

— Roko C. Buljan

2

Neden .htmlama .append2. durumda değil ?

— Mühendis

@Engineer - Üzgünüm, burada bir hataydı. Bunu düzelttim.

— Ashwin

İkinci yöntemin hız yürütme açısından daha hızlı olduğunu düşündüm, ancak birincisi (% 10 ~% 40) daha hızlı görünüyor: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Fabrizio Calderan

339

İlk seçenek size daha esneklik sağlar:

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

Ve elbette .html('*')içeriği geçersiz kılar .append('*'), ancak sanmıyorum, bu sizin sorunuz değildi.

Başka bir iyi uygulama, jQuery değişkenlerinize önek eklemektir $: jQuery'de
$ değişkenini kullanmanın arkasında belirli bir neden var mı?

"class"Özellik adının etrafına tırnak işareti koymak, daha az esnek tarayıcılarla daha uyumlu hale getirecektir.

— gdoron Monica'yı destekliyor
kaynak

10

Ayrıca $bence jQuery koleksiyon isimlerini " " ile başlatmak iyi bir uygulamadır . Yaptığınız şeyin gerektirmediğine dikkat edin $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Patlama Hapları

Bu dolar işaretleri gerekli mi yoksa yazım hatası mı? $div. Bu sözdizimini daha önce görmedim, ama Jquery'de yeniyim.

— felwithe

Her zaman $ değişken bir jquery nesnesidir, $ _ bir jQuery koleksiyon ise ve _var bir sayaç ise kullanın. Normal değişkenler için var.

— Casey

1

eleman yaratmanın bu yolu için belgeler nerede? $("<div>", {id: "foo", class: "a"});. Bunun için başka seçenekler olup olmadığını bilmek istiyorum

— Saba Ahang

@ gdoron lütfen, soruma bir göz atın stackoverflow.com/questions/35413044/…

— Vixed

74

Şahsen kodun performanstan daha okunabilir ve düzenlenebilir olmasının daha önemli olduğunu düşünüyorum. Hangisine bakmak daha kolay bulunursa ve yukarıdaki faktörler için seçtiğiniz kişi hangisi olmalıdır. Bunu şöyle yazabilirsiniz:

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

Ve ilk yönteminiz:

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

Ancak okunabilirlik söz konusu olduğunda; jQuery yaklaşımı benim favorim . Bu Yararlı jQuery Hileleri, Notlar ve En İyi Uygulamaları izleyin

— Niranjan Singh
kaynak

Yeni HTML öğeleri oluşturma hakkındaki jQuery referansına bu bağlantı için teşekkür ederiz . Bunun için google çok zor.

— Bob Stein

Daha iyisini yapın: stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

Çok daha etkileyici bir yol,

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

Referans: Dokümanlar

— Darshan
kaynak

4

classdokümanlara göre tırnak işaretleri içinde olmalıdır (yukarıdaki Dokümanlar bağlantısı aracılığıyla): "Ayrılmış" bir kelime, JavaScript'e ayrılmış bir kelime olduğu için nesnede alıntılanmalıdır ve "className", DOM özelliğine başvurduğundan kullanılamaz , özellik değil. "

— Isaac Gregson

5

Göre jQuery resmi belgeler

Bir HTML öğesi oluşturmak için $("<div/>")veya $("<div></div>")tercih edilir.

Sonra aşağıdaki yöntemlerden birini kullanabilirsiniz appendTo, append, before, aftervb ,. DOM'a yeni öğe eklemek için.

PS: jQuery Sürüm 1.11.x

— Alan Dong
kaynak

2

3.4 için olan belgelere göre , özniteliklerin attr()yöntemle kullanılması tercih edilir .

$('<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
kaynak

Alıntı ekledim. classTırnak işaretleri koymazsanız , bu sessizce başarısız olur ve delilikle sonuçlanabilir.

— John Henckel

0

Aslında jQuery kullanarak öğeleri oluşturmak ilk seçeneği tavsiye ederim. ikinci yaklaşım, öğenin innerHTML özelliğini HTML olarak gerçekleşen ve hataya daha yatkın ve daha az esnek olan bir dizeye ayarlar.

— jbabey
kaynak

1

@ İkinci yaklaşımla, değiştirdiğiniz kabın diğer tüm çocuklarını yanlışlıkla silebilirsiniz: jsfiddle.net/jbabey/RBXq5/1

— jbabey

0

Eğer #boxboş, hiçbir şey, ama değilse bunlar çok farklı şeyler yapmak. Birincisi div, son alt düğümü olarak a ekleyecektir #box. İkincisi, içeriğini tamamen #boxtek bir boş div, metin ve tümüyle değiştirir.

— Patlama Hapları
kaynak

Oh .. Ben burada append kullanmak istemiyorum;)

— Ashwin

0

Bir div öğesini aşağıdaki şekilde oluşturmak da mümkündür:

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

sınıf ekle

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

ayrıca gerçekleştirebilir append()veappendChild()

— nabila_ahmed
kaynak