Pelajari Cara Membuat Elemen di jQuery

Membuat elemen baru adalah salah satu tugas paling dasar yang dapat Anda selesaikan dengan library JavaScript jQuery. Menggunakan jQuery, tugasnya jauh lebih sederhana daripada pendekatan yang setara dengan Model Objek Dokumen (DOM). Anda juga akan merasa lebih fleksibel dan ekspresif, semakin sering Anda menggunakan jQuery.

Untuk mencapai suatu tujuan, Anda harus dapat menambahkan elemen Anda ke halaman web. Pelajari cara menambahkan item daftar baru atau mengganti paragraf dengan konten baru menggunakan jQuery.

Apa itu jQuery?

Pustaka jQuery adalah kumpulan dari JavaScript kode dengan dua tujuan utama:

• Ini menyederhanakan operasi JavaScript umum.
• Ini menangani masalah JavaScript kompatibilitas silang antara berbagai browser.

Tujuan kedua melayani bug, tetapi juga membahas perbedaan implementasi antara browser. Kedua tujuan tersebut kurang diperlukan daripada sebelumnya, karena browser meningkat dari waktu ke waktu. Tapi jQuery masih bisa menjadi alat yang berharga.

Apa itu Elemen?

Sebuah elemen kadang-kadang disebut sebagai tag. Meskipun keduanya sering digunakan secara bergantian, ada perbedaan halus. Sebuah tag mengacu pada literal atau

 Anda sertakan dalam file HTML untuk menandai konten teks. Elemen adalah objek di belakang layar yang mewakili teks yang ditandai. Pikirkan sebuah elemen sebagai DOM mitra untuk tag HTML.

Cara Membuat Elemen Baru Menggunakan jQuery

Seperti kebanyakan operasi jQuery, membuat elemen dimulai dengan fungsi dolar, $(). Ini adalah jalan pintas ke inti jQuery() fungsi. Fungsi ini memiliki tiga tujuan yang berbeda, yaitu:

• Mencocokkan elemen, biasanya yang sudah ada di dokumen
• Membuat elemen baru
• Menjalankan fungsi panggilan balik saat DOM siap

Saat Anda melewatkan string yang berisi HTML sebagai parameter pertama, fungsi ini akan membuat elemen baru:

$("")

Ini mengembalikan objek jQuery khusus yang berisi kumpulan elemen. Dalam hal ini, ada satu objek yang mewakili elemen "a" yang baru saja kita buat.

String harus terlihat seperti HTML untuk membedakan tindakan ini dari elemen yang cocok. Dalam praktiknya, ini berarti string harus dimulai dengan a <. Anda tidak dapat menambahkan teks biasa ke dokumen menggunakan metode ini.

Penting untuk dipahami bahwa ini tidak menambahkan elemen ke dokumen Anda, itu hanya membuat elemen baru yang siap untuk Anda tambahkan. Elemennya 'tidak terikat', mengambil memori tetapi sebenarnya bukan bagian dari halaman terakhir—belum.

Menambahkan HTML yang Lebih Kompleks

Fungsi dolar sebenarnya dapat membuat lebih dari satu elemen. Bahkan, itu dapat membangun pohon elemen HTML apa pun yang Anda inginkan:

$("

satu
dua
tiga
")

Anda juga dapat menggunakan format ini untuk membuat elemen dengan atribut:

$('')

Cara Mengatur Atribut pada Elemen Baru

Anda dapat membuat elemen jQuery baru dan mengatur atributnya tanpa harus membuat string HTML lengkap sendiri. Ini berguna jika Anda membuat nilai atribut secara dinamis. Sebagai contoh:

foto = Tanggal baru().getHours() > 12? "sore.jpg": "pagi.jpg";
$("", {src: foto });

Bagaimana Menambahkan Elemen

Setelah Anda membuat elemen baru, Anda dapat menambahkannya ke dokumen dengan beberapa cara berbeda. Dokumentasi jQuery mengumpulkan metode-metode ini bersama-sama di bawah kategori 'manipulasi'.

Tambahkan sebagai Anak dari Elemen yang Ada

$("tubuh").append($("
Halo Dunia
"));
$(document.body).append($el);

Anda dapat menggunakan metode ini, misalnya, untuk menambahkan item daftar baru di akhir daftar.

Tambahkan Ini sebagai Saudara dari Elemen yang Ada

$("hal.terakhir").setelah("
Paragraf baru
")
$("ul li: pertama").before("
barang baru
")

Ini adalah pilihan yang baik jika, misalnya, Anda ingin menambahkan paragraf baru di tengah dua paragraf lainnya.

Ganti Elemen yang Ada

Anda dapat menukar elemen yang ada dengan yang baru dibuat menggunakan ubah dengan() metode:

$('#lama').gantiDengan("
Paragraf baru
");

Membungkus Elemen yang Ada

Ini adalah kasus penggunaan yang cukup langka, tetapi Anda mungkin ingin menyertakan elemen yang ada di elemen baru. Misalnya, Anda mungkin memiliki kode elemen yang ingin Anda bungkus a pra:

$('kode#n1').wrap("
")

Mengakses Elemen yang Anda Buat

NS $() fungsi mengembalikan objek jQuery. Ini berguna untuk operasi tindak lanjut:

$el = $("p");
$('tubuh').append($el);

Perhatikan bahwa, menurut konvensi, pemrogram jQuery sering memberi nama variabel jQuery dengan tanda dolar di depan. Ini hanyalah skema penamaan dan tidak terkait langsung dengan $() fungsi.

Membuat Elemen Menggunakan jQuery

Meskipun Anda dapat memanipulasi DOM menggunakan fungsi JavaScript asli, jQuery membuatnya lebih mudah untuk melakukannya. Masih sangat berguna untuk memiliki pemahaman yang baik tentang DOM, tetapi jQuery membuat bekerja dengannya jauh lebih menyenangkan.

Pahlawan Tersembunyi Situs Web: Memahami DOM

Belajar desain web dan perlu tahu lebih banyak tentang Model Objek Dokumen? Inilah yang perlu Anda ketahui tentang DOM.

Baca Selanjutnya

Tentang Penulis