Saya cukup mahir dengan coding, tapi sekarang dan kemudian saya menemukan kode yang tampaknya pada dasarnya melakukan hal yang sama. Pertanyaan utama saya di sini adalah, mengapa anda menggunakan .append()
ketimbang .setelah()
atau sebaliknya ayat-ayat?
Saya telah melihat dan tidak dapat tampaknya menemukan definisi yang jelas dari perbedaan antara dua dan kapan harus menggunakannya dan kapan tidak.
Apa manfaat dari salah satu dari yang lain dan juga mengapa saya menggunakan salah satu ketimbang yang lain?? Dapatkah seseorang tolong jelaskan ini padaku?
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);
});
.append()
menempatkan data dalam elemen di terakhir
dan
.prepend()
menempatkan mengawali elem di pertama index
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
mengeksekusi hal itu 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>
.prepend()
mengeksekusi hal itu 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>
.setelah()
menempatkan elemen setelah elemen
.sebelum()
menempatkan elemen sebelum elemen
$('.a').after($('.c'));
setelah eksekusi:
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
$('.a').before($('.c'));
setelah eksekusi:
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
<div class='b'>b</div>
</div>
Ini gambar yang ditampilkan di bawah ini memberikan pemahaman yang jelas dan menunjukkan perbedaan yang tepat antara .append()
, .prepend()
, .setelah()
dan .sebelum()
Anda dapat melihat dari gambar yang .append()
dan .prepend()
menambah unsur-unsur baru sebagai anak unsur-unsur (berwarna coklat) ke target.
Dan .setelah()
dan .sebelum()
menambah unsur-unsur baru sebagai saudara unsur-unsur (berwarna hitam) ke target.
Berikut adalah [DEMO][2] untuk pemahaman yang lebih baik.
EDIT: membalik versi dari fungsi-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 menciptakan satu unsur yang sama bersarang:
var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))
...tapi mereka kembali elemen yang berbeda. Hal ini penting untuk metode chaining.
Cara terbaik adalah pergi untuk dokumentasi.
.append()
vs .setelah()
append()
: Menyisipkan konten, yang ditentukan oleh parameter, akhir setiap elemen dalam himpunan dari unsur-unsur yang cocok.setelah()
: Menyisipkan konten, yang ditentukan oleh parameter, setelah setiap elemen dalam himpunan dari unsur-unsur yang cocok. .prepend()
vs .sebelum()
prepend()
: Menyisipkan konten, yang ditentukan oleh parameter, awal setiap elemen dalam himpunan dari unsur-unsur yang cocok.sebelum()
: Menyisipkan konten, yang ditentukan oleh parameter, sebelum setiap elemen dalam himpunan dari unsur-unsur yang cocok.Jadi, append dan tambahkan mengacu pada anak-anak dari objek sedangkan setelah dan sebelum mengacu pada saudara kandung dari objek.
Ada perbedaan mendasar antara .append()
dan .setelah()
dan .prepend()
dan .sebelum()
.
.append()
menambah parameter elemen di dalam selector elemen's tag di akhir sedangkan .setelah()
menambah parameter elemen setelah elemen's tag.
Vice-versa adalah untuk .prepend()
dan .sebelum()
.
[Biola][1]
Tidak ada keuntungan tambahan untuk masing-masing dari mereka. Itu benar-benar tergantung pada skenario anda. Kode di bawah ini menunjukkan perbedaan mereka.
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) seperti pohon yang tepat. Elemen HTML adalah simpul dari pohon ini.
The append()
menambah node baru untuk anak
dari node yang anda sebut itu.
Example:$("#mydiv").append("<p>Hello there</p>")
creates a child node <p> to <div>
Setelah()
menambah node baru sebagai saudara kandung atau pada tingkat yang sama atau anak ke orang tua dari simpul yang anda sebut itu.
Ketika anda memanipulasi DOM dengan jquery metode yang anda gunakan tergantung pada hasil yang anda inginkan dan yang sering digunakan adalah untuk mengganti konten.
Dalam mengganti konten yang ingin anda .hapus()
isi dan menggantinya dengan konten baru. Jika anda .hapus()
ada tag dan kemudian mencoba untuk menggunakan .append()
tidak't bekerja karena tag itu sendiri telah dihapus, sedangkan jika anda menggunakan .setelah()
, konten baru ditambahkan 'di luar' (sekarang dihapus) tag dan isn't dipengaruhi oleh sebelumnya.hapus()
.