jquery .html () ve .append () karşılaştırması

Diyelim ki boş bir div var:

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

Bu:

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

Aynı:

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

JQuery'nin yöntemlerinden herhangi birine bir HTML dizesi ilettiğinizde, olan budur:

Geçici bir eleman yaratıldı, buna x diyelim. x's innerHTML, geçirdiğiniz HTML dizesine ayarlanır. Daha sonra jQuery, üretilen düğümlerin (yani x'lerin) her birini childNodesyeni oluşturulmuş bir belge parçasına aktarır ve daha sonra bir dahaki sefere önbelleğe alır. Daha sonra parçanın childNodesyeni bir DOM koleksiyonu olarak döndürülecektir .

JQuery bir dizi çapraz tarayıcı kontrolü ve diğer çeşitli optimizasyonlar yaptığı için aslında bundan çok daha karmaşık olduğunu unutmayın. Sadece geçirirseniz Ör <div></div>için jQuery(), jQuery kestirme yollardan sadece yapacağız document.createElement('div').

DÜZENLEME : jQuery'nin gerçekleştirdiği çok sayıda denetimi görmek için buraya , buraya ve buraya bir göz atın .

innerHTMLher zaman ne yaptığınızı yönetmesine izin vermese de , genellikle daha hızlı bir yaklaşımdır. jQuery'nin yaklaşımı kadar basit değil element.innerHTML = ...- bahsettiğim gibi, bir sürü kontrol ve optimizasyon var.

Doğru teknik büyük ölçüde duruma bağlıdır. Çok sayıda özdeş öğe oluşturmak istiyorsanız, yapmak istediğiniz son şey, her yinelemede yeni bir jQuery nesnesi oluşturarak büyük bir döngü oluşturmaktır. Örneğin, jQuery ile 100 div oluşturmanın en hızlı yolu:

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

Ayrıca dikkate alınması gereken okunabilirlik ve bakım sorunları da vardır.

Bu:

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

... olan çok bundan daha bakımı zordur:

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

Aynı değiller. Birincisi, önce başka bir jQuery nesnesi oluşturmadan HTML'nin yerini alır . İkincisi, ikinci div için ek bir jQuery sarıcı oluşturur, sonra onu ilkine ekler .

Bir jQuery Sarıcı (örnek başına):

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

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

İki jQuery Sarıcı (örnek başına):

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

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

Birkaç farklı kullanım vakanız var. İçeriği değiştirmek istiyorsanız .html, eşdeğer olduğundan büyük bir çağrıdır innerHTML = "...". Ancak, yalnızca içerik eklemek istiyorsanız, ekstra $()sarmalayıcı kümesine gerek yoktur.

Eklenenleri divdaha sonra değiştirmeniz gerekiyorsa yalnızca iki sarmalayıcı kullanın . Bu durumda bile, yine de sadece birini kullanmanız gerekebilir:

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

tarafından eğer .addŞunu .append, sonuç ise aynıdır #myDivboştur.

performans aynı mı? bilmiyorum.

.html(x) sonunda aynı şeyi yapıyor .empty().append(x)

Eh, .html()kullanımları .innerHTMLdaha hızlı olan DOM oluşturma.

Aynı etkiyi elde etmek için ikinci yöntemi aşağıdaki yollarla elde edebilirsiniz:

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

Luca, html()hte HTML'yi eklediğinden, daha hızlı performans sağladığından söz etti .

Yine de bazı durumlarda, ikinci seçeneği tercih edersiniz, düşünün:

// 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() her şeyin yerini alacak.

.append() sonunda eklenir.

Verilen cevapların dışında, böyle bir şeyiniz olması durumunda:

<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>

yani herhangi bir dosya yüklendiyse otomatik olarak bir dosya daha yüklemek istersiniz, belirtilen kod çalışmaz, çünkü dosya yüklendikten sonra ilk dosya yükleme öğesi yeniden oluşturulur ve bu nedenle yüklenen dosya ondan silinir . Bunun yerine .append () yöntemini kullanmalısınız:

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

Bu bana oldu . Jquery sürümü: 3.3. Bir nesne listesinde döngü yapıyorsanız ve her nesneyi bir üst dom öğesinin alt öğesi olarak eklemek istiyorsanız, .html ve .append çok farklı davranır. .htmlüst öğeye yalnızca son nesneyi eklerken, .appendtüm liste nesnelerini üst öğenin alt öğesi olarak ekler.