Pelajari Cara Membuat Elemen di jQuery

Pelajari Cara Membuat Elemen di jQuery

Membuat elemen baru adalah salah satu tugas paling dasar yang dapat Anda selesaikan dengan perpustakaan 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 elemen sebagai pasangan DOM 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.



hard drive eksternal windows tidak muncul

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:

$('
  • one
  • two
  • three
')

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

$(' my hometown')

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:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

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

$('body').append($('

Hello, world

'));
$(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

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    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:

    $('#old').replaceWith('

    New paragraph

    ');

    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 untuk :

    $('code#n1').wrap('
    ')
    Mengakses Elemen yang Anda Buat
     
    NS $() fungsi mengembalikan objek jQuery. Ini berguna untuk operasi tindak lanjut:
    $el = $('p');  
    $('body').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.
      Membagikan    Membagikan      Menciak      Surel      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       Topik-topik yang berkaitan  
       
    • Pemrograman
      •  
    • Pengembangan web
      •  
    • jQuery
      •  
      Tentang Penulis   Bobby Jack(58 Artikel Diterbitkan)      
    Bobby adalah penggemar teknologi yang bekerja sebagai pengembang perangkat lunak selama hampir dua dekade. Dia bersemangat tentang game, bekerja sebagai Editor Ulasan di Majalah Switch Player, dan mendalami semua aspek penerbitan online & pengembangan web.
    More From Bobby Jack
    Berlangganan newsletter kami
     
    Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
    Klik di sini untuk berlangganan