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


206

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

2
saya tidak pernah menggunakan appendbug yang mana (digunakan untuk?), saya menggunakan appendToyang tampaknya juga benar secara semantik terutama karena ada after(rantai rantai) - nb: aftersetelah tidak ada dalam
mikakun

Kedengarannya seperti apa yang Anda benar-benar ingin tahu adalah mengapa memilih append vs after untuk mencapai hasil yang sama. Katakanlah Anda memiliki <div class = 'a'> <p class = 'b'> </p> </div>. Kemudian $ ('. A'). Append ('hello') akan memiliki pengaruh yang sama dengan $ ('. B'). After ('hello'). Yaitu: <div class = 'a'> <p class = 'b'> </p> 'hello' </div>. Dalam hal itu, tidak masalah. Html yang dihasilkan adalah sama, jadi pilih append atau sesudahnya tergantung pada pemilih apa yang paling nyaman untuk dibangun dalam kode Anda.
tgoneil

Jawaban:


447

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.



1
@ joraid memperbarui jawabannya sesuai komentar Anda dengan beberapa tautan js fiddle dalam eksekusi.
Jai

1
penjelasan yang bagus, tetapi bagaimana jika saya ingin memuat dalam tampilan html eksternal? Menggunakan MVC seperti:$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
Djeroen

4
@ Djeroen .append()tidak akan memuatnya seperti itu. Anda harus menggunakan .load(url, params).
Jai

1
Bagus! Dapatkah saya juga bertanya tentang perbedaan antara '$ (elemen) .append (konten)' dan '$ (konten) .appendTo (target)', dan sejenisnya? (Saya tidak ingin memulai utas baru dalam hal ini!)
Apostolos

135

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

jQuery infografis

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:

jQuery insertion infographic, ditambah versi membalik fungsi

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 .


2
gambar yang sangat mudah dimengerti. :)
Abdul Hameed

Terpilih! Jika saya bertanya lalu bagaimana dengan appendTo dan prependTo dalam gambar? Mohon perbarui.
Brst dev7

Saya terus merujuk pada infografis Anda. Semoga Anda menyukai penambahan fungsi yang dibalik.
Bob Stein

37

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


19

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.


9

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


5

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

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

3

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.


3

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().

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.