Pertanyaan jQuery document.createElement setara?


Saya refactoring beberapa kode JavaScript lama dan ada banyak manipulasi DOM yang terjadi.

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 menggunakan jQuery. Saya telah bereksperimen dengan:

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

Tapi saya tidak yakin apakah ini lebih baik.


1134
2017-11-06 12:26


asal


Jawaban:


inilah contoh Anda di "satu" baris.

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

Memperbarui: Saya pikir saya akan memperbarui postingan ini karena masih mendapat sedikit traffic. Di komentar di bawah ada beberapa diskusi tentang $("<div>") vs $("<div></div>") vs $(document.createElement('div')) sebagai cara menciptakan elemen baru, dan yang "terbaik".

Saya mengumpulkan patokan kecil, dan inilah kira-kira hasil mengulangi opsi di atas 100.000 kali:

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 itu bukan kejutan besar, tapi document.createElement adalah metode tercepat. Tentu saja, sebelum Anda pergi dan mulai refactoring seluruh basis kode Anda, ingat bahwa perbedaan yang kita bicarakan di sini (di semua versi jQuery kuno) setara dengan sekitar 3 milidetik tambahan per seribu elemen.

Perbarui 2

Diperbarui untuk jQuery 1.7.2 dan meletakkan patokan pada JSBen.ch yang mungkin sedikit lebih ilmiah daripada tolok ukur primitif saya, ditambah itu bisa menjadi crowdsourced sekarang!

http://jsben.ch/#/ARUtz


1199
2017-11-06 12:34



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

Sebagai contoh:

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

Anda kemudian 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 lainnya, yang mungkin Anda temukan lebih ringkas daripada menggunakan createElement lalu mengatur atribut seperti cellSpacing dan className melalui JS.


123
2017-11-06 12:30



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


62
2017-07-15 07:14



sejak jQuery1.8, menggunakan $.parseHTML() untuk membuat elemen adalah pilihan yang lebih baik.

ada dua manfaat:

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

2. yang lebih penting adalah bahwa Anda mungkin menderita serangan lintas situs (Info lebih lanjut) jika Anda menggunakan cara lama. jika Anda memiliki sesuatu seperti:

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

orang jahat bisa masukan <script src="xss-attach.js"></script> untuk menggodamu. untung, $.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, tolong perhatikan itu a adalah objek jQuery sementara 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>​]

39
2018-01-24 03:01



Saya melakukan seperti itu:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

35
2017-11-24 18:07



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

$( document.createElement('div') ,{
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

34
2018-06-18 05:53



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

Sejak jQuery 1.8 ada jQuery.parseHTML () fungsi yang sekarang menjadi cara yang lebih disukai untuk membuat elemen. Juga, ada beberapa masalah dengan menguraikan HTML melalui $('(html code goes here)'), misalnya situs web resmi jQuery menyebutkan hal berikut di salah satu dari catatan rilis mereka:

Penguraian HTML santai: Anda dapat sekali lagi memiliki ruang utama atau   baris baru sebelum tag dalam $ (htmlString). Kami masih sangat menyarankan itu   Anda menggunakan $ .parseHTML () saat menguraikan HTML yang diperoleh dari eksternal   sumber, dan mungkin membuat perubahan lebih lanjut ke parsing HTML di   masa depan.

Untuk berhubungan dengan pertanyaan yang sebenarnya, berikan contoh yang bisa diterjemahkan ke:

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

yang sayangnya kurang nyaman daripada hanya menggunakan $(), tetapi memberi Anda lebih banyak kontrol, misalnya Anda dapat memilih untuk mengecualikan tag skrip (ia akan membiarkan skrip sebaris suka onclick meskipun):

> $.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>​]

Juga, inilah tolok ukur dari jawaban teratas yang disesuaikan dengan realitas baru:

Tautan JSbin

jQuery 1.9.1

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

Sepertinya parseHTML lebih dekat createElement dari $(), tetapi semua dorongan hilang setelah membungkus hasil dalam objek jQuery baru


25
2017-09-29 19:01



var mydiv = $('<div />') // also works

11
2017-11-17 17:03



var div = $('<div/>');
div.append('Hello World!');

Adalah cara terpendek / termudah untuk membuat elemen DIV di jQuery.


7
2017-12-22 22:43



Semuanya sangat lurus ke depan! Berikut 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 );

5
2018-05-25 17:17