Cara yang disukai untuk membuat elemen baru dengan jQuery

227

Saya punya 2 cara saya bisa membuat <div>penggunaan jQuery.

Antara:

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

Atau:

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

Apa kelemahan menggunakan cara kedua selain kegunaan kembali?

javascript jquery append createelement jquery-append Ashwin
sumber
8
Itu hanya masalah reusability. Panggilanmu.
Roko C. Buljan
@ gdoron oleh reusability yang saya maksud: jika Anda memiliki elemen di dalam variabel, daripada Anda dapat memanggil kembali var itu di mana pun Anda butuhkan, seperti dalam contoh Anda.
Roko C. Buljan
2
Mengapa .html, tetapi tidak .appenddalam kasus ke-2?
Insinyur
@ Engineer - Maaf, itu kesalahan di sini. Saya memperbaikinya.
Ashwin
Saya pikir metode yang terakhir ini lebih cepat dalam hal eksekusi kecepatan tetapi yang pertama tampaknya (10% ~ 40%) lebih cepat: jsperf.com/jquery-append-string-vs-append-jquery-reference
Fabrizio Calderan

Jawaban:

339

Opsi pertama memberi Anda lebih banyak fleksibilitas:

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

Dan tentu saja .html('*')menimpa konten sementara .append('*')tidak, tapi saya kira, ini bukan pertanyaan Anda.

Praktik bagus lainnya adalah mengawali variabel jQuery Anda dengan $:
Apakah ada alasan khusus di balik penggunaan variabel $ with di jQuery

Menempatkan kutipan di sekitar "class"nama properti akan membuatnya lebih kompatibel dengan browser yang kurang fleksibel.

gdoron mendukung Monica
sumber
10
Juga praktik yang baik untuk memulai nama koleksi jQuery dengan tanda " $", menurut saya. Hanya mencatat bahwa apa yang telah Anda lakukan tidak memerlukan $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");
Pil Ledakan
Apakah tanda-tanda dolar itu perlu atau salah ketik? $div. Saya belum pernah melihat sintaks itu sebelumnya, tetapi saya baru mengenal Jquery.
felwithe
Saya selalu menggunakan $ adalah variabel adalah objek jquery, $ _ jika itu adalah koleksi jQuery, dan _var jika itu adalah penghitung. The var untuk variabel reguler.
Casey
1
di mana dokumentasi untuk cara membuat elemen ini? $("<div>", {id: "foo", class: "a"});. Saya ingin tahu apakah ada pilihan lain untuk itu
Saba Ahang
@ gdoron tolong, lihat pertanyaan saya stackoverflow.com/questions/35413044/…
Vixed
74

Saya pribadi berpikir bahwa lebih penting agar kode dapat dibaca dan diedit daripada pemain. Apa pun yang Anda temukan lebih mudah dilihat dan itu harus menjadi yang Anda pilih untuk faktor-faktor di atas. Anda dapat menuliskannya sebagai:

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

Dan Metode pertama Anda sebagai:

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

Tetapi sejauh keterbacaan berjalan; pendekatan jQuery adalah favorit saya . Ikuti Trik jQuery, Catatan, dan Praktik Terbaik yang Bermanfaat ini

Niranjan Singh
sumber
Terima kasih atas tautan itu ke referensi jQuery tentang cara membuat elemen HTML baru . SANGAT susah ke google untuk itu.
Bob Stein
Lebih baik melakukannya seperti: stackoverflow.com/a/43719563/383904
Roko C. Buljan
25

Jauh lebih ekspresif,

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

Referensi: Documents

Darshan
sumber
4
classharus dalam tanda kutip, sesuai dengan dokumen (melalui tautan Documents di atas): "Nama" kelas "harus dikutip dalam objek karena merupakan kata yang dilindungi undang-undang JavaScript, dan" className "tidak dapat digunakan karena merujuk ke properti DOM , bukan atributnya. "
Isaac Gregson
5

Menurut dokumentasi resmi jQuery

Untuk membuat elemen HTML, $("<div/>")atau $("<div></div>")lebih disukai.

Kemudian Anda dapat menggunakan salah appendTo, append, before, afterdan dll ,. untuk memasukkan elemen baru ke DOM.

PS: jQuery Versi 1.11.x

Alan Dong
sumber
2

Menurut dokumentasi untuk 3.4 , Lebih disukai menggunakan atribut dengan attr()metode.

$('<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
sumber
Saya menambahkan kutipan. Jika Anda tidak classmengutip, ini akan gagal secara diam-diam dan dapat mengakibatkan kegilaan.
John Henckel
0

Saya akan merekomendasikan opsi pertama, di mana Anda benar-benar membangun elemen menggunakan jQuery. pendekatan kedua cukup menetapkan properti innerHTML elemen ke string, yang kebetulan HTML, dan lebih rentan kesalahan dan kurang fleksibel.

jaby
sumber
1
@Ash dengan pendekatan kedua, Anda mungkin keliru menghapus semua anak lain dari wadah yang Anda modifikasi: jsfiddle.net/jbabey/RBXq5/1
jbabey
0

Jika #boxkosong, tidak ada apa-apa, tetapi jika tidak ini melakukan hal-hal yang sangat berbeda. Yang pertama akan menambahkan divsebagai simpul anak terakhir #box. Yang terakhir sepenuhnya menggantikan konten #boxdengan satu divteks, kosong dan semua.

Pil Ledakan
sumber
Oh .. maksudku tidak menggunakan append di sini;)
Ashwin
0

Dimungkinkan juga untuk membuat elemen div dengan cara berikut: 

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

tambahkan kelas 

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

juga dapat melakukan append()danappendChild()

nabila_ahmed
sumber