jquery .html () vs .append ()

Katakanlah saya punya div kosong:

<div id='myDiv'></div>

Apakah ini:

$('#myDiv').html("<div id='mySecondDiv'></div>");

Sama seperti:

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

Setiap kali Anda melewatkan string HTML ke salah satu metode jQuery, inilah yang terjadi:

Elemen sementara dibuat, sebut saja x. x's innerHTMLdiatur ke string HTML yang telah Anda lewati. Kemudian jQuery akan mentransfer setiap node yang dihasilkan (yaitu, x childNodes) ke fragmen dokumen yang baru dibuat, yang kemudian akan di-cache untuk waktu berikutnya. Kemudian akan mengembalikan fragmen childNodessebagai koleksi DOM segar.

Perhatikan bahwa sebenarnya jauh lebih rumit dari itu, karena jQuery melakukan banyak pemeriksaan lintas-browser dan berbagai optimisasi lainnya. Misalnya, jika Anda lulus hanya <div></div>untuk jQuery(), jQuery akan mengambil jalan pintas dan cukup lakukan document.createElement('div').

EDIT : Untuk melihat jumlah pemeriksaan yang dilakukan jQuery, lihat di sini , di sini dan di sini .

innerHTMLadalah umumnya lebih cepat pendekatan, meskipun jangan biarkan yang mengatur apa yang Anda lakukan sepanjang waktu. Pendekatan jQuery tidak sesederhana element.innerHTML = ...- seperti yang saya sebutkan, ada banyak pemeriksaan dan optimisasi yang terjadi.

Teknik yang benar sangat tergantung pada situasi. Jika Anda ingin membuat sejumlah besar elemen yang identik, maka hal terakhir yang ingin Anda lakukan adalah membuat loop besar, membuat objek jQuery baru di setiap iterasi. Misalnya cara tercepat untuk membuat 100 div dengan jQuery:

jQuery(Array(101).join('<div></div>'));

Ada juga masalah keterbacaan dan pemeliharaan untuk diperhitungkan.

Ini:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... jauh lebih sulit untuk dipertahankan daripada ini:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

Mereka tidak sama. Yang pertama menggantikan HTML tanpa membuat objek jQuery lain terlebih dahulu. Yang kedua membuat pembungkus jQuery tambahan untuk div kedua, lalu menambahkannya ke yang pertama.

Satu Pembungkus jQuery (per contoh):

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

Dua Pembungkus jQuery (per contoh):

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

Anda memiliki beberapa kasus penggunaan berbeda yang terjadi. Jika Anda ingin mengganti konten, .htmlini adalah panggilan yang bagus karena setara dengan innerHTML = "...". Namun, jika Anda hanya ingin menambahkan konten, $()set bungkus tambahan tidak diperlukan.

Gunakan hanya dua pembungkus jika Anda perlu memanipulasi yang ditambahkan divnanti. Bahkan dalam kasus itu, Anda mungkin hanya perlu menggunakannya:

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

jika yang .addAnda maksudkan .append, maka hasilnya sama jika #myDivkosong.

apakah kinerjanya sama? tidak tahu

.html(x) akhirnya melakukan hal yang sama seperti .empty().append(x)

Nah, .html()penggunaan .innerHTMLyang lebih cepat dari pembuatan DOM .

Anda bisa mendapatkan metode kedua untuk mencapai efek yang sama dengan:

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca menyebutkan bahwa html()hanya menyisipkan hte HTML yang menghasilkan kinerja lebih cepat.

Namun dalam beberapa kesempatan, Anda akan memilih opsi kedua, pertimbangkan:

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

.html() akan menggantikan semuanya.

.append() hanya akan menambahkan di akhir.

Selain jawaban yang diberikan, jika Anda memiliki sesuatu seperti ini:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

artinya Anda ingin secara otomatis menambahkan satu lagi upload file jika ada file yang diunggah, kode yang disebutkan tidak akan berfungsi, karena setelah file diunggah, elemen unggahan file pertama akan dibuat kembali dan oleh karena itu file yang diunggah akan dihapus dari sana. . Anda harus menggunakan .append () sebagai gantinya:

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

Ini pernah terjadi pada saya . Versi jquery: 3.3. Jika Anda mengulang daftar objek, dan ingin menambahkan setiap objek sebagai anak dari beberapa elemen dom induk, maka .html dan .append akan berperilaku sangat berbeda. .htmlakhirnya akan menambahkan hanya objek terakhir ke elemen induk, sedangkan .appendakan menambahkan semua objek daftar sebagai anak-anak dari elemen induk.