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

Saya cukup mahir dengan pengkodean, tetapi sekarang dan kemudian saya menemukan kode yang pada dasarnya melakukan hal yang sama. Pertanyaan utama saya di sini adalah, mengapa Anda menggunakan ayat .append()itu .after()atau sebaliknya?

Saya telah mencari dan tampaknya tidak dapat menemukan definisi yang jelas tentang perbedaan antara keduanya dan kapan menggunakannya dan kapan tidak.

Apa manfaat dari satu di atas yang lain dan juga mengapa saya menggunakan yang satu daripada yang lain ?? Bisakah seseorang tolong jelaskan hal ini kepada saya?

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);
});

Lihat:

.append()menempatkan data di dalam elemen di last indexdan
.prepend()menempatkan elem di depanfirst index

seharusnya:

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

ketika .append()dijalankan akan terlihat seperti ini:

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

setelah eksekusi:

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

Mengotak-atik .append () dalam eksekusi.

ketika .prepend()dijalankan akan terlihat seperti ini:

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

setelah eksekusi:

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

Mengotak-atik .prepend () dalam eksekusi.

.after()menempatkan elemen setelah elemen
.before()menempatkan elemen di depan elemen

gunakan setelah:

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

setelah eksekusi:

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

Bermain biola dengan .after () dalam eksekusi.

gunakan sebelumnya:

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

setelah eksekusi:

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

Biola dengan .before () dalam eksekusi.

Gambar ini ditampilkan di bawah memberikan pemahaman yang jelas dan menunjukkan perbedaan yang tepat antara .append(), .prepend(), .after()dan.before()

Anda dapat melihat dari gambar itu .append()dan .prepend()menambahkan elemen baru sebagai elemen anak (berwarna coklat) ke target.

Dan .after()dan .before()menambahkan elemen baru sebagai elemen saudara (berwarna hitam) ke target.

Berikut adalah DEMO untuk pemahaman yang lebih baik.

EDIT: versi terbalik dari fungsi-fungsi itu:

Menggunakan kode ini :

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

pada target ini:

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

Jadi, meskipun fungsi-fungsi ini membalik urutan parameter, masing-masing membuat elemen bersarang yang sama:

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

... tetapi mereka mengembalikan elemen yang berbeda. Ini penting untuk metode chaining .

append()& prepend()untuk menyisipkan konten di dalam elemen (menjadikan kontennya sebagai anak) sementara after()& before()menyisipkan konten di luar elemen (menjadikan konten sebagai saudara kandungnya).

Cara terbaik adalah pergi ke dokumentasi.

.append() vs. .after()

• . append(): Masukkan konten, ditentukan oleh parameter, ke akhir setiap elemen dalam set elemen yang cocok.
• . after(): Masukkan konten, ditentukan oleh parameter, setelah masing-masing elemen dalam set elemen yang cocok.

.prepend() vs. .before()

• prepend(): Masukkan konten, ditentukan oleh parameter, ke awal setiap elemen dalam set elemen yang cocok.
• . before(): Masukkan konten, ditentukan oleh parameter, sebelum setiap elemen dalam set elemen yang cocok.

Jadi, append dan prepend mengacu pada anak dari objek sedangkan sesudah dan sebelumnya mengacu pada saudara dari objek.

Ada perbedaan mendasar antara .append()dan .after()dan .prepend()dan .before().

.append()menambahkan elemen parameter di dalam tag elemen pemilih di bagian paling akhir sedangkan .after()menambahkan elemen parameter setelah tag elemen .

Dan sebaliknya untuk .prepend()dan .before().

Biola

Tidak ada keuntungan tambahan untuk masing-masing dari mereka. Ini sepenuhnya tergantung pada skenario Anda. Kode di bawah ini menunjukkan perbedaannya.

    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>    

Bayangkan DOM (halaman HTML) sebagai pohon yang benar. Elemen HTML adalah simpul dari pohon ini.

The append()menambahkan node baru ke childnode Anda menyebutnya di.

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

creates a child node <p> to <div>

The after()menambahkan node baru sebagai saudara atau pada tingkat yang sama atau anak dengan orang tua dari simpul Anda menyebutnya di.

Untuk mencoba dan menjawab pertanyaan utama Anda :

mengapa Anda menggunakan .append () ketimbang .after () atau sebaliknya?

Ketika Anda memanipulasi DOM dengan jquery, metode yang Anda gunakan bergantung pada hasil yang Anda inginkan dan yang sering digunakan adalah mengganti konten.

Dalam mengganti konten Anda ingin .remove()konten dan menggantinya dengan konten baru. Jika Anda .remove()tag yang ada dan kemudian mencoba menggunakannya .append()tidak akan berfungsi karena tag itu sendiri telah dihapus, sedangkan jika Anda menggunakan .after(), konten baru ditambahkan 'di luar' tag (sekarang dihapus) dan tidak terpengaruh oleh sebelumnya .remove().