Tasarım Kodlama

JavaScript ile Div Oluşturma

DIV etiketleri HTML’in en önemli etiketlerinden biridir. Bazen bir div etiketinin içeriğini değiştirmek, bazen de bir div nesnesini dinamik olarak oluşturmak isteriz. Bu yazıdan butona tıklayarak div oluşturacağız. Sonra da oluşturduğumuz bu div etiketinin içerisindeki yazıyı değiştireceğiz.

JavaScript DIV Oluşturma Örneği

Oluşturulacak örnekte bir tane buton ve butona her tıkladığımızda içinde 1,2,3… şekilinde sayılar yazdırılacak. Ayrıca oluşturulan div nesneleri stille biçimlendirme işlemi de yapılacaktır.

Aşağıdaki gibi buton, div nesnelerinin içine ekleneceği panel divini ve dinamik olarak oluşturulacak olan divlerin CSS(kutu) kodlarını oluşturuyoruz.

 

#ekle ve #panel nesnelerini seçmek  ve butona her tıklandığında div içinedeki sayı değerini arttıracak sayac kodlarını aşağıdaki gibi yazıyoruz.

 

#ekle butonuna tıklandığında kodların çalışması için onclick olayını aşağıdaki gibi oluşturuyoruz.

Butona tıklandığında div nesnesi oluşturulacak, oluşturulan div içine sayac değeri eklenecek ve .kutu stili nesneye eklenip, nesne panel divine eklenecek. Bunlar için gerekli olan kodları aşağıdaki gibi oluşturuyoruz.

 

Tüm kodları yazdığımızda aşağıdaki gibi oluşacaktır.

 

 

 

 

 

Yorum yap