JavaScript input Oluşturma – Web Tasarım & Programlama
Javascript

JavaScript input Oluşturma

Bu yazıda JavaScript kullanarak bir sayfaya input ekleme yapacağız. Bazı kaynaklarda javascript textbox oluştrma olarak da geçmektedir.

Neden dinamik olarak input eklemek isteriz?

Bazı durumlarda sayfada mevcut olarak bulunmayan HTML etiketlerine ihtiyaç duyabiliriz. Örneğin bir kura sistemi yapmak isteriz bunun için dinamik olarak kura sayısı kadar buton oluşturmak gerekir. İşte bu yazıda HTML etiketlerini dinamik olarak nasıl oluşturacağınızı öğreneceksiniz.

HTML Etiket Oluşturma

HTML ile bir etiket oluşturmak için createElement metodu kullanılır. createElement metodunun kullanımına bakalım.

var degisken=document.createElement(“etiket_adi”);

etiket_adi:div, p gibi etiket ismi yazıyoruz.

 

HTML input Oluşturma Örneği

HTML etiketlerini dinamik olarak oluşturmak için kullanacağımız örnek sayfaya bir tane TEXTBOX nesnesi ekleme olacak. HTML’de textbox input etiketleri ile oluşturulur. input etiketinin type niteliğine text değeri verilerek textbox oluşturulur.

Öncelikle textbox için bir tane input nesnesi oluşturuyoruz.

 

Şimdi oluşturulan etikete nitelik verelim. Aşağıdaki input için önemli olan nitelik eklemelerini yapıyoruz.

 

Etiket bellek üzerinde oluşturuldu fakat nereye ekleneceğini belirtmek için HTML içinde bir etiket seçimi yapmak gerekiyor. Aşağıdaki etiket #panel div’ini seçer.

 

appendChild fonksiyonu ile ekleme yapılır. eklenecek_yer.appendChild(eklenecek_nesne) şeklinde fonksiyon kullanılır. Aşağıdaki kod panelDiv içine nesneyi ekler.

 

Kodların tamamı şu şekilde olacaktır.

 

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box