Apa metode append() dalam JavaScript

Apa Metode Append Dalam Javascript



Misalkan Anda ingin membuat daftar dan menambahkan beberapa elemen. Ini menghabiskan banyak waktu jika dilakukan secara manual. Untuk melakukannya, JavaScript menyediakan “ menambahkan() ” metode untuk mengambil objek sebagai argumen dan kemudian memasukkannya di akhir daftar yang ditentukan. Selanjutnya, Anda juga dapat menambahkan elemen secara berbeda, seperti dalam daftar atau dalam bentuk paragraf.

Posting ini telah menyatakan metode untuk menemukan id objek dalam array objek JavaScript.

Apa metode append() dalam JavaScript?

The “ menambahkan() ” metode dalam JavaScript digunakan untuk memasukkan elemen atau objek string di akhir elemen. Ini adalah salah satu metode yang paling berguna untuk menambahkan elemen yang diperlukan pada posisi yang ditentukan di ujung elemen.







Bagaimana Cara Menggunakan Metode append() dalam JavaScript?

Untuk memanfaatkan fungsi append() dalam JavaScript, ikuti sintaks yang disebutkan di bawah ini:



( pemilih ) . menambahkan ( isi, fungsi ( indeks, html ) )

Di Sini:



  • pemilih ” adalah elemen HTML yang diakses.
  • menambahkan() ” metode digunakan untuk menambahkan elemen.
  • isi ” adalah parameter yang diperlukan, yang menentukan konten data yang akan ditambahkan.
  • fungsi() ” adalah elemen opsional.

Contoh 1: Tambahkan Elemen yang Sama di Paragraf

Untuk menambahkan elemen yang sama dalam sebuah paragraf, pertama, buka halaman HTML yang relevan dan gunakan tombol “

” untuk menyematkan data di antara tag. Selanjutnya, berikan tanda “ pengenal ” ke paragraf untuk mengaksesnya dalam JavaScript:





< p id = 'elemen' > Selamat datang di Linuxint P >

Selanjutnya, buat tombol dengan bantuan tombol “ ' elemen dan gunakan ' kelas ” untuk menentukan nama tertentu dan menyematkan teks dengan elemen tombol untuk ditampilkan pada tombol:

< tombol kelas = 'btn' > Tambahkan Elemen tombol >

Sekarang, gunakan ' ” untuk menambahkan kode JavaScript:



< naskah >

$ ( dokumen ) . siap ( fungsi ( ) {

$ ( '.btn' ) . klik ( fungsi ( ) {

$ ( '#elemen' ) . menambahkan ( 'Tambahkan teks pada klik tombol' ) ;

} ) ;

} ) ;

naskah >

Menurut kode yang diberikan:

  • siap() ” metode digunakan untuk membuat fungsi tersedia saat dokumen berhasil dimuat di layar. Untuk melakukannya, lewati ' fungsi() ” metode sebagai parameter.
  • klik() ” metode dipanggil ketika pengguna mengklik elemen tombol HTML. Metode ini menentukan eksekusi klik saat pengguna menekan tombol.
  • menambahkan() ” metode menyisipkan satu set objek setelah eksekusi “ klik() ' metode. Untuk tujuan itu, berikan teks yang perlu ditambahkan.

Keluaran

Contoh 2: Tambahkan Elemen Berbeda dalam Formulir Daftar

Anda dapat menambahkan elemen yang berbeda dalam bentuk daftar. Untuk melakukannya, buat halaman HTML dan sematkan teks dengan bantuan tombol “

” tag:

< p id = 'menambahkan' > JavaScript Tambahkan ( ) Fungsi P >

Buat tombol menggunakan “ ' elemen dan gunakan ' onclick ” peristiwa yang terjadi saat pengguna mengeklik elemen HTML:

< klik tombol = 'fungsi()' > Tambahkan Elemen tombol >

Buat wadah div dan tetapkan id ke wadah itu dengan menggunakan ' pengenal ” atribut. Selanjutnya, tambahkan elemen dengan bantuan “

” tag:

< id div = 'lebih-elemen' >

< P > Elemen 1 P >

< P > Elemen 2 P >

div >

Selanjutnya, gunakan “ ” dan tambahkan kode berikut di antara tag:

< naskah >

var ElementNumber = 3 ;

fungsi fungsi ( ) {

adalah orang tua = dokumen. getElementById ( 'lebih-elemen' ) ;

adalah newElement = '

Elemen' + ElementNumber + '

'
;

induk. insertAdjacentHTML ( 'sebelumnya' , dan Elemen ) ;

ElementNumber ++;

}

naskah >

Dalam kode yang disebutkan di atas:

  • Deklarasikan variabel menggunakan “ dulu ” kata kunci dan berikan nilai padanya sesuai dengan preferensi Anda.
  • Tentukan fungsi dan inisialisasi variabel lain di dalam fungsi yang ditentukan dengan nama tertentu.
  • Kemudian, aktifkan “ getElementById() ” Metode JavaScript untuk mengakses elemen dan meneruskan nilai id sebagai parameter.
  • masukkanAdjacentHTML() ” metode digunakan untuk menambahkan kode HTML ke posisi tertentu dan menambahkan elemen yang berdekatan satu sama lain.
  • Manfaatkan operator kenaikan untuk membuat kenaikan pada elemen:

Anda telah mempelajari tentang penggunaan metode append() dalam JavaScript dengan berbagai contoh.

Kesimpulan

menambahkan() ” adalah metode JavaScript yang digunakan untuk memasukkan elemen dan objek di akhir elemen yang ditentukan. Anda dapat menambahkan elemen yang sama dan elemen yang berbeda dalam bentuk paragraf dan daftar. Lebih khusus lagi, ini dapat dipicu dengan satu klik tombol. Posting ini telah menunjukkan metode append() dalam JavaScript.