JavaScript Textbox Oluşturma – Tasarım Kodlama
JavaScript

JavaScript Textbox Oluşturma

Bazen HTML etiketlerini dinamik olarak oluşturmak isteriz. Bu gibi durumlarda JavaScript kullanarak etiket oluşturmak mümkündür.
Bu yazıda textarea,input vb. HTML etiketlerini JavaScript ile oluşturmak için CreateElement fonksiyonunu kullanacağız.

Kullanımı:

etiket_adi:Oluşturmak istediğiniz etiket( örn:input) adını belirtiyoruz.

textbox oluşturma: Bir etiketin oluşturulup DOM ağacına eklenmesi 4 aşamada gerçekleşir. Başlığımıza konu olan etiketi oluşturalım. HTML içinde textbox adında bir nesne yoktur. textbox oluşturmak için input(<input type=”text”>) etiketi kullanılır.

1.Adım: Aşağıdaki kod etiketi oluşturur.

 

2.Adım: Çoğu etiket niteliğe sahiptir. Özellikle form etiketleri birden fazla niteliği almak zorundadır. Oluşturduğumuz etikete type, name, id ve value niteliklerini ekler.

 

3.Adım: 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.

 

4.Adım: 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.

 

Aşama aşama yazılan kodların tamamladıktan sonra aşağıdaki gibi oluşacaktır.

 

 

Yorum bırak