.append (), prepend (), .after () ve .before ()

Kodlama konusunda oldukça yetkinim, ama şimdi ve sonra temelde aynı şeyi yapan kodla karşılaşıyorum. Buradaki asıl sorum, neden ayet .append()yerine .after()ya da ayet kullanıyorsunuz?

Aradım ve ikisi arasındaki farkların ne zaman kullanılacağı ve ne zaman kullanılamayacağı konusunda net bir tanım bulamıyorum.

Birinin diğerine faydaları nelerdir ve neden birini diğerinden ziyade kullanayım? Lütfen birisi bunu bana açıklayabilir mi?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

Görmek:

.append()bir öğe içinde koyar verileri last indexve
.prepend()koyar prepending ELEM defirst index

varsayalım:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

ne zaman .append()yürütür böyle görünecek:

$('.a').append($('.c'));

infazdan sonra:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

Yürütme sırasında .append () ile uğraşın.

ne zaman .prepend()yürütür böyle görünecek:

$('.a').prepend($('.c'));

infazdan sonra:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

Yürütme sırasında .prepend () ile uğraşın.

.after()öğeyi öğeden sonra
.before()koyar öğeyi öğenin önüne koyar

sonra kullanmak:

$('.a').after($('.c'));

infazdan sonra:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

Yürütme sırasında .after () ile uğraşın.

önce kullanma:

$('.a').before($('.c'));

infazdan sonra:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

Yürütme sırasında .before () ile uğraşın.

Bu görüntü aşağıda gösterilmiştir net bir anlayış verir ve arasındaki kesin farkı gösterir .append(), .prepend(), .after()ve.before()

Yeni öğeleri hedefe alt öğeler (kahverengi renkli) olarak ekleyen .append()ve .prepend()ekleyen görüntüden görebilirsiniz .

Ve .after()ve .before()yeni unsurlar ekleyen kardeş elemanları (renkli siyah) hedefe.

İşte daha iyi anlamak için bir DEMO .

EDIT: bu işlevlerin çevrilmiş sürümleri:

Bu kodu kullanarak :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

bu hedefte:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

Bu işlevler parametre sırasını tersine çevirse de, her biri aynı öğe iç içe geçirmesini oluşturur:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... ama farklı bir element döndürüyorlar. Bu yöntem zincirleme için önemlidir .

append()& prepend()öğesi bir öğenin içine içerik eklemek (içeriği alt öğesi yapmak) ve after()& before()öğeyi bir öğenin dışına eklemek (içeriği kardeş yapmak) içindir.

En iyi yol belgelere gitmektir.

.append() vs .after()

• . append(): Eşleşen öğeler kümesindeki her öğenin sonuna parametre tarafından belirtilen içeriği ekleyin .
• . after(): Eşleşen öğeler kümesindeki her öğeden sonra parametre tarafından belirtilen içeriği ekleyin .

.prepend() vs .before()

• prepend(): Parametre tarafından belirtilen içeriği, eşleşen öğeler kümesindeki her öğenin başına ekleyin .
• . before(): Eşleşen öğeler kümesindeki her öğeden önce parametre tarafından belirtilen içeriği ekleyin .

Bu nedenle, ekleme ve başa ekleme nesnenin çocuğuna karşılık gelirken, öncesi ve öncesi nesnenin kardeşine atıfta bulunur.

Arasında temel bir fark vardır .append()ve .after()ve .prepend()ve .before().

.append()parametre öğesini en sonda seçici öğenin etiketine.after() eklerken, parametre öğesini öğenin etiketinin arkasına ekler .

Tam tersi .prepend()ve içindir .before().

Vaktini boşa harcamak

Her biri için ekstra bir avantaj yoktur. Bu tamamen senaryonuza bağlıdır. Aşağıdaki kod farklarını göstermektedir.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

DOM'yi (HTML sayfası) bir ağaç hakkı olarak hayal edin . HTML öğeleri bu ağacın düğümleridir.

append()İçin yeni bir düğüm ekler childbunu çağrıda düğümün.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

after()Bir kardeş olarak veya bunu çağrıda düğümün ebeveyne aynı seviyede veya çocuğa yeni bir düğüm ekler.

Ana sorunuza cevap vermeye çalışmak için :

neden .after () yerine ya da ayet yerine .append () kullanırsınız?

DOM'u jquery ile değiştirirken, kullandığınız yöntemler istediğiniz sonuca bağlıdır ve sık kullanılan bir içerik içeriği değiştirmek içindir.

İçeriği değiştirmek .remove()ve içeriği yeni içerikle değiştirmek. .remove()Mevcut etiketi siz kullanırsanız ve daha sonra kullanmayı denerseniz .append()etiketin kendisi kaldırıldığı için çalışmaz, ancak kullanırsanız .after()yeni içerik (şimdi kaldırılmıştır) etiketinin 'dışında' eklenir ve önceki etiketten etkilenmez .remove().