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.
|
1 2 3 |
var nesne=document.createElement("input"); |
Şimdi oluşturulan etikete nitelik verelim. Aşağıdaki input için önemli olan nitelik eklemelerini yapıyoruz.
|
1 2 3 4 5 6 |
nesne.setAttribute("type","text"); nesne.setAttribute("name","mesaj"); nesne.setAttribute("id","mesaj"); nesne.setAttribute("value","merhaba dünya"); |
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.
|
1 2 3 |
var panelDiv=document.getElementById("panel"); |
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.
|
1 2 3 |
panelDiv.appendChild(nesne); |
Kodların tamamı şu şekilde olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> </head> <body> <div id="panel"></div> <script> var nesne=document.createElement("input"); nesne.setAttribute("type","text"); nesne.setAttribute("name","mesaj"); nesne.setAttribute("id","mesaj"); nesne.setAttribute("value","merhaba dünya"); var panelDiv=document.getElementById("panel"); panelDiv.appendChild(nesne); </script> </body> </html> |
