Jquery document.createElement setara?

Saya memperbaiki kode javascript lama, dan ada banyak manipulasi DOM.

 var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); 

Saya ingin tahu apakah ada cara yang lebih baik untuk melakukan ini dengan jQuery. Saya bereksperimen dengan:

 var odv = $.create("div"); $.append(odv); // And many more 

Tapi saya tidak yakin apa yang terbaik.

1066
06 нояб. diatur oleh Rob Stevenson-Leggett 06 nov. 2008-11-06 15:26 '08 pada 15:26 2008-11-06 15:26
@ 13 jawaban

Inilah contoh Anda di baris "satu".

 this.$OuterDiv = $('<div></div>') .hide() .append($('<table></table>') .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

Pembaruan: Saya pikir saya memperbarui posting ini, karena masih menerima banyak lalu lintas. Komentar berikut membahas masalah $("<div>") vs $("<div></div>") vs $(document.createElement('div')) sebagai cara untuk membuat elemen baru dan yang merupakan "terbaik" ".

Saya mengumpulkan tes kecil , dan ini adalah tentang hasil mengu>

jQuery 1.4, 1.5, 1.6

  Chrome 11 Firefox 4 IE9 <div> 440ms 640ms 460ms <div></div> 420ms 650ms 480ms createElement 100ms 180ms 300ms 

jQuery 1.3

  Chrome 11 <div> 770ms <div></div> 3800ms createElement 100ms 

jQuery 1.2

  Chrome 11 <div> 3500ms <div></div> 3500ms createElement 100ms 

Saya pikir ini bukan kejutan besar, tetapi document.createElement adalah metode tercepat. Tentu saja, sebelum Anda pergi dan mulai refactoring semua basis kode Anda, ingatlah bahwa perbedaan yang kita bicarakan di sini (dalam semua kecuali versi jQuery kuno) adalah sekitar 3 milidetik per seribu item.

Perbarui 2

Diperbarui untuk jQuery 1.7.2 dan menguji JSBen.ch, yang mungkin sedikit lebih banyak dipelajari daripada tes primitif saya, dan sekarang Anda dapat menggunakan crowdsourcing!

http://jsben.ch/#/ARUtz

1149
06 нояб. jawabannya diberikan nickf 06 Nov. 2008-11-06 15:34 '08 pada 15:34 2008-11-06 15:34

Cukup dengan menyajikan elemen HTML yang ingin Anda tambahkan ke konstruktor jQuery $() akan mengembalikan objek jQuery dari HTML yang baru dibuat yang cocok untuk ditambahkan ke DOM menggunakan metode append() jQuery.

Sebagai contoh:

 var t = $("<table cellspacing='0' class='text'></table>"); $.append(t); 

Setelah itu Anda dapat mengisi tabel ini secara terprogram jika Anda mau.

Ini memberi Anda kemampuan untuk menentukan sembarang HTML yang Anda suka, termasuk nama kelas atau atribut lain yang mungkin lebih ringkas daripada menggunakan createElement , dan kemudian menetapkan atribut seperti cellSpacing dan className melalui JS.

116
06 нояб. jawabannya diberikan oleh Adam Bellaire 06 nov. 2008-11-06 15:30 '08 pada 15:30 2008-11-06 15:30

Membuat elemen DOM baru adalah fitur utama dari metode jQuery() , lihat:

Salam

57
15 июля '10 в 10:14 2010-07-15 10:14 jawabannya diberikan oleh abernier 15 Juli '10 di 10:14 2010-07-15 10:14

sejak jQuery1.8 , menggunakan $.parseHTML() untuk membuat elemen adalah pilihan terbaik.

Ada dua keuntungan:

1. Jika Anda menggunakan metode lama, yang mungkin seperti $(string) , jQuery memeriksa string untuk memastikan Anda ingin memilih tag html atau membuat elemen baru. Menggunakan $.parseHTML() , Anda memberi tahu jQuery bahwa Anda ingin secara eksplisit membuat elemen baru, jadi kinerjanya mungkin sedikit lebih baik.

2. Lebih penting lagi, Anda mungkin menghadapi serangan melalui situs ( lebih ) jika Anda menggunakan metode lama. jika Anda memiliki sesuatu seperti:

  var userInput = window.prompt("please enter selector"); $(userInput).hide(); 

Orang jahat dapat mengetikkan <script src="xss-attach.js"></script> untuk menggoda Anda. Untungnya, $.parseHTML() hindari rasa malu ini untuk Anda:

 var a = $('<div>') // a is [<div>​</div>​] var b = $.parseHTML('<div>') // b is [<div>​</div>​] $('<script src="xss-attach.js"></script>') // jQuery returns [<script src=​"xss-attach.js">​</script>​] $.parseHTML('<script src="xss-attach.js"></script>') // jQuery returns [] 

Namun, perhatikan bahwa a adalah objek jQuery, dan b adalah elemen html:

 a.html('123') // [<div>​123​</div>​] b.html('123') // TypeError: Object [object HTMLDivElement] has no method 'html' $(b).html('123') // [<div>​123​</div>​] 
36
24 янв. Jawabannya diberikan oleh Brian 24 Januari. 2013-01-24 06:01 '13 pada pukul 6:01 pagi 2013-01-24 06:01

Saya merasa bahwa menggunakan document.createElement('div') dengan jQuery lebih cepat:

 $( document.createElement('div') ,{ text: 'Div text', 'class': 'className' }).appendTo('#parentDiv'); 
30
18 июня '13 в 8:53 2013-06-18 08:53 jawabannya diberikan oleh Om Shankar 18 Juni '13 pukul 8:53 2013-06-18 08:53

Saya melakukan ini:

 $('<div/>',{ text: 'Div text', class: 'className' }).appendTo('#parentDiv'); 
28
24 нояб. Jawabannya diberikan oleh kami pada 24 November. 2012-11-24 21:07 '12 pada 21:07 2012-11-24 21:07

Meskipun ini adalah pertanyaan yang sangat lama, saya pikir akan menyenangkan untuk memperbaruinya dengan informasi terbaru;

Sejak jQuery 1.8 ada fungsi jQuery.parseHTML () , yang sekarang merupakan cara yang lebih disukai untuk membuat elemen. Selain itu, ada beberapa masalah dengan parsing HTML melalui $('(html code goes here)') , misalnya, situs web jQuery resmi menyebutkan yang berikut ini di salah satu catatan rilisnya :

Penguraian HTML yang rileks: Anda dapat kembali memiliki spasi atau baris baru sebelum tag dalam $ (htmlString). Kami masih sangat menyarankan agar Anda menggunakan $ .parseHTML () saat mem-parsing HTML dari sumber eksternal dan dapat membuat perubahan tambahan pada penguraian HTML di masa mendatang.

Agar relevan dengan pertanyaan sebenarnya, contoh yang diberikan dapat diterjemahkan ke dalam:

 this.$OuterDiv = $($.parseHTML('<div></div>')) .hide() .append($($.parseHTML('<table></table>')) .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

yang, sayangnya, kurang nyaman daripada hanya $() , tetapi memberi Anda lebih banyak kontrol, misalnya, Anda dapat mengecualikan tag skrip (itu akan meninggalkan skrip tertanam, misalnya onclick ):

 > $.parseHTML('<div onclick="a"></div><script></script>') [<div onclick=​"a">​</div>​] > $.parseHTML('<div onclick="a"></div><script></script>', document, true) [<div onclick=​"a">​</div>​, <script>​</script>​] 

Selain itu, di sini tolok ukur dari jawaban teratas disesuaikan dengan kenyataan baru:

Tautan Jsbin

jQuery 1.9.1

   $ .parseHTML: 88ms   $ ($. parseHTML): 240ms   <div> </ div>: 138ms   <div>: 143ms   createElement: 64ms

Tampaknya parseHTML jauh lebih dekat dengan createElement daripada $() , tetapi semua akselerasi menghi>

23
29 сент. jawabannya diberikan oleh adamziel pada 29 September . 2013-09-29 22:01 '13 pada 10:01 2013-09-29 22:01
 var mydiv = $('<div />') // also works 
11
17 нояб. Jawabannya diberikan oleh Shimon Doodkin 17 November. 2010-11-17 20:03 '10 pada 20:03 2010-11-17 20:03
 var div = $('<div/>'); div.append('Hello World!'); 

Ini adalah cara terpendek / termudah untuk membuat elemen DIV di jQuery.

6
23 дек. Jawabannya diberikan AcidicChip 23 Des. 2010-12-23 01:43 '10 pada 1:43 2010-12-23 01:43

Saya baru saja membuat plugin jQuery kecil untuk ini: https://github.com/ern0/jquery.create

Ini mengikuti sintaks Anda:

 var myDiv = $.create("div"); 

Pengidentifikasi simpul DOM dapat ditentukan sebagai parameter kedua:

 var secondItem = $.create("div","item2"); 

Apakah ini serius? Tidak Tetapi sintaks ini lebih baik dari $ ("<div> </ div>"), dan ini adalah nilai yang sangat baik untuk uang ini.

Saya adalah pengguna jQuery baru, beralih dari DOMAssistant, yang memiliki fungsi serupa: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Plugin saya lebih sederhana, saya pikir attrs dan konten harus ditambahkan dengan metode chaining:

 $("#container").append( $.create("div").addClass("box").html("Hello, world!") ); 

Selain itu, ini adalah contoh yang baik untuk plugin jQuery sederhana (ke-100).

4
15 авг. jawabannya diberikan ern0 15 agustus . 2013-08-15 17:49 '13 pada 17:49 2013-08-15 17:49

Semuanya sangat mudah! Berikut adalah beberapa contoh cepat ...


 var $example = $( XMLDocRoot ); 

 var $element = $( $example[0].createElement('tag') ); // Note the [0], which is the root $element.attr({ id: '1', hello: 'world' }); 

 var $example.find('parent > child').append( $element ); 
4
25 мая '10 в 20:17 2010-05-25 20:17 jawabannya diberikan oleh Randy pada 25 Mei '10 pada 20:17 2010-05-25 20:17

Tampaknya penciptaan elemen akan mencapai Anda. Setelah Anda memulai rantai, perbedaan kinerja kecil.

http://jsperf.com/jquery-dom-node-creation

Apakah saya melewatkan sesuatu?

1
28 февр. LukeAskew menjawab pada 28 Feb. 2013-02-28 02:59 '13 pada 2:59 2013-02-28 02:59

JQuery di luar kotak tidak memiliki yang setara dengan elemen createElement. Bahkan, sebagian besar pekerjaan jQuery dilakukan secara internal menggunakan innerHTML alih-alih manipulasi DOM murni. Seperti yang disebutkan Adam, Anda dapat mencapai hasil yang serupa.

Ada juga plugin yang tersedia yang menggunakan DOM lebih dari innerHTML, misalnya appendDOM , DOMEC dan FlyDOM , untuk beberapa nama. Dari segi kinerja, jquery tertanam masih yang paling efisien (terutama karena menggunakan innerHTML)

0
06 нояб. balasan yang diberikan oleh James Hughes 06 Nov 2008-11-06 15:35 '08 pada 15:35 2008-11-06 15:35

Pertanyaan lain tentang tag atau Ajukan pertanyaan