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ı:
1 2 3 | var degisken=document.CreateElement("etiket_adi"); |
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.
1 2 3 | var nesne=document.createElement("input"); |
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.
1 2 3 4 5 6 | nesne.setAttribute("type","text"); nesne.setAttribute("name","mesaj"); nesne.setAttribute("id","mesaj"); nesne.setAttribute("value","merhaba dünya"); |
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.
1 2 3 | var panelDiv=document.getElementById("panel"); |
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.
1 2 3 | panelDiv.appendChild(nesne); |
Aşama aşama yazılan kodların tamamladıktan sonra aşağıdaki gibi oluşacaktı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> |
Yorum Yap