Cara Membuat Kotak Teks Secara Dinamik dalam JavaScript

Ada yang menyebutnya sihir - kemampuan untuk membuat objek muncul tiba-tiba entah dari mana. Anda boleh membuat sihir semacam ini di laman web anda menggunakan beberapa baris JavaScript. Kotak teks, misalnya, adalah elemen HTML yang baik untuk digunakan ketika belajar membuat objek muncul secara dinamis. Daripada memasukkannya ke dalam kod anda semasa anda merancang halaman Web anda, tambahkan kotak teks mengikut keperluan dan kagum pengunjung laman web pada masa yang sama.

Pembuatan Kotak Teks

Sebelum membuat kotak teks menjadi kenyataan, anda mesti memahami apa itu kotak teks. HTML mengenalinya sebagai tag input seperti yang ditunjukkan dalam contoh berikut:

Teg input ini membuat kotak teks yang mempunyai dua atribut penting; id dan taip. Atribut type, yang nilainya adalah "teks," memberitahu penyemak imbas untuk membuat kotak teks dan bukan jenis kawalan lain seperti butang. Atribut id, yang merupakan pilihan, dapat berguna jika anda perlu memanipulasi kotak teks kemudian. Pilihan nilai, yang juga opsional, berisi nilai yang ingin anda lihat di kotak teks ketika halaman Web dibuka.

Kotak Teks Dinamik

HTML tidak peduli semasa anda menentukan atribut elemen selagi anda memberi mereka nilai di suatu tempat. Ini bermakna anda mempunyai kemampuan untuk membuat elemen kotak teks secara dinamik dan menetapkan atributnya pada bila-bila masa yang anda mahukan. Fungsi document.createElement menjadikannya mungkin seperti yang ditunjukkan di bawah:

var box = document.createElement ("input");

Itu sahaja yang diperlukan untuk membuat elemen input HTML dan menetapkannya ke pemboleh ubah bernama "kotak." Objek kotak tidak menjadi kotak teks sehingga anda memberikan nilai atribut jenisnya sebagai "teks" seperti yang ditunjukkan dalam contoh ini:

box.type = "teks";

Integrasi Halaman Web

Kod di bawah ini menambahkan kotak teks ke dokumen HTML. Menggunakan fungsi appendChild yang berguna:

document.body.appendChild (kotak);

Sekiranya anda ingin menambahkan kotak teks setelah kawalan tertentu, gunakan pernyataan berikut:

document.getElementById ("some_Element_ID"). appendChild (kotak);

Ganti "some_Element_ID" dengan nama elemen selepas itu anda ingin menambahkan kotak teks. Contohnya, jika elemen itu adalah butang yang IDnya adalah "button1", pernyataan appendChild akan muncul seperti berikut:

document.getElementById ("butang1"). appendChild (kotak);

Atribut Pilihan

Kotak teks baru anda akan berfungsi dengan sempurna menggunakan kod ini. Cukup buat fungsi JavaScript yang berisi pernyataan dan panggilnya setiap kali anda memerlukan kotak teks. Namun, anda juga dapat menetapkan nilai kotak teks dan atribut ID seperti berikut:

box.value = boxValue; box.id = boxID;

Lulus nilai boxValue dan boxID ke fungsi, dan ia menerapkan atribut tersebut ke kotak teks. Sekiranya anda memberikan nilai ID, anda boleh menggunakannya kemudian untuk mengemas kini sifat kotak teks seperti yang ditunjukkan dalam contoh di bawah:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "merah";

Pernyataan pertama memperoleh rujukan ke kotak teks dan pernyataan terakhir menukar warna latar kotak teks menjadi merah.