Menambahkan elemen jQuery

Dengan jQuery, menambahkan elemen/konten menjadi sangat mudah.

Menambahkan konten HTML baru

Kami akan belajar empat metode jQuery untuk menambahkan konten baru:

  • append() - Menyisipkan konten di akhir elemen yang dipilih
  • prepend() - Menyisipkan konten di awal elemen yang dipilih
  • after() - Menyisipkan konten setelah elemen yang dipilih
  • before() - Menyisipkan konten sebelum elemen yang dipilih

Metode jQuery append()

Metode jQuery append() mengisi konten di akhir elemen yang dipilih.

Contoh

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

Coba sendiri

Metode jQuery prepend()

Metode jQuery prepend() mengisi konten di awal elemen yang dipilih.

Contoh

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

Coba sendiri

Menambahkan beberapa elemen baru melalui metode append() dan prepend()

Dalam contoh di atas, kami hanya menambahkan teks/HTML di awal/akhir elemen yang dipilih.

Namun, metode append() dan prepend() dapat menerima parameter jumlah yang tak terbatas. Dapat digunakan untuk mengenerate teks/HTML (seperti di contoh di atas), atau melalui kode JavaScript dan elemen DOM.

Dalam contoh di bawah ini, kami membuat beberapa elemen baru. Elemen-elemen ini dapat dibuat dengan text/HTML, jQuery, atau JavaScript/DOM. kemudian kami menambahkan elemen-elemen baru ini ke teks melalui metode append() (metode prepend() juga berlaku):

Contoh

function appendText()
{
var txt1="<p>Text.</p>";               // Membuat elemen baru dengan HTML
var txt2=$("<p></p>").text("Text.");   // Menggunakan jQuery untuk membuat elemen baru
var txt3=document.createElement("p");  // Membuat elemen baru melalui DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Menambahkan elemen baru
{}

Coba sendiri

Metode after() dan before() jQuery

Metode after() jQuery menyesipkan konten setelah elemen yang dipilih.

Metode before() jQuery menyesipkan konten sebelum elemen yang dipilih.

Contoh

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

Coba sendiri

Menambahkan beberapa elemen baru melalui metode after() dan before()

Metode after() dan before() dapat menerima parameter dalam jumlah tak terbatas. Elemen baru dapat dibuat melalui text/HTML, jQuery, atau JavaScript/DOM.

Dalam contoh di bawah ini, kami membuat beberapa elemen baru. Elemen-elemen ini dapat dibuat melalui text/HTML, jQuery, atau JavaScript/DOM. kemudian kami menyisipkan elemen-elemen baru ini ke dalam teks melalui metode after() (metode before() juga berlaku):

Contoh

function afterText()
{
var txt1="<b>I </b>";                    // Membuat elemen baru melalui HTML
var txt2=$("<i></i>").text("love ");     // Membuat elemen baru melalui jQuery
var txt3=document.createElement("big");  // Membuat elemen baru melalui DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Menyisipkan elemen baru setelah img
{}

Coba sendiri

Referensi HTML jQuery

Untuk referensi lengkap tentang metode HTML jQuery, silakan kunjungi referensi berikut: