tutorial pengembangan web terbaru
 

jQuery - Tambahkan Elemen

❮ Sebelumnya Berikutnya Bab ❯

Dengan jQuery, mudah untuk menambahkan baru elemen / konten.

Tambahkan Konten Baru HTML

Kita akan melihat empat metode jQuery yang digunakan untuk menambahkan konten baru:

  • append() - isi Sisipan pada akhir elemen yang dipilih
  • prepend() - isi Sisipan pada awal dari elemen yang dipilih
  • after() - Memasukkan konten setelah elemen yang dipilih
  • before() - isi Sisipan sebelum elemen yang dipilih

jQuery append() Metode

JQuery append() metode memasukkan konten PADA AKHIR elemen HTML yang dipilih.

Contoh

$("p").append("Some appended text.");
Cobalah sendiri "

jQuery prepend() Metode

JQuery prepend() metode memasukkan konten PADA AWAL elemen HTML yang dipilih.

Contoh

$("p").prepend("Some prepended text.");
Cobalah sendiri "

Tambahkan Beberapa New Elements Dengan append() dan prepend()

Dalam kedua contoh di atas, kita hanya dimasukkan beberapa teks / HTML pada awal / akhir elemen HTML yang dipilih.

Namun, baik append() dan prepend() metode dapat mengambil jumlah tak terbatas elemen baru sebagai parameter. Unsur-unsur baru dapat dihasilkan dengan teks / HTML (seperti yang telah kita lakukan pada contoh di atas), dengan jQuery, atau dengan kode JavaScript dan elemen DOM.

Pada contoh berikut, kita membuat beberapa elemen baru. Unsur-unsur yang dibuat dengan teks / HTML, jQuery, dan JavaScript / DOM. Kemudian kita menambahkan elemen baru untuk teks dengan append() metode (ini akan bekerja untuk prepend() juga):

Contoh

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Cobalah sendiri "

jQuery after() dan before() Metode

JQuery after() metode memasukkan konten SETELAH elemen HTML yang dipilih.

JQuery before() metode memasukkan konten SEBELUM elemen HTML yang dipilih.

Contoh

$("img").after("Some text after");

$("img").before("Some text before");
Cobalah sendiri "

Tambahkan Beberapa New Elements Dengan after() dan before()

Juga, baik after() dan before() metode dapat mengambil jumlah tak terbatas elemen baru sebagai parameter. Unsur-unsur baru dapat dihasilkan dengan teks / HTML (seperti yang telah kita lakukan dalam contoh di atas), dengan jQuery, atau dengan kode JavaScript dan elemen DOM.

Pada contoh berikut, kita membuat beberapa elemen baru. Unsur-unsur yang dibuat dengan teks / HTML, jQuery, dan JavaScript / DOM. Kemudian kita memasukkan unsur-unsur baru untuk teks dengan after() metode (ini akan bekerja untuk before() juga):

Contoh

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»

jQuery HTML Referensi

Untuk gambaran lengkap dari semua metode jQuery HTML, silahkan ke kami Referensi / CSS jQuery HTML .


❮ Sebelumnya Berikutnya Bab ❯