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.
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 27 28 29 30 31 32 33 34 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> <style> .kutu{ width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:20px; font-family: sans-serif; font-weight: bold; background: red; color:white; margin: 5px; float:left; } </style> </head> <body> <button id="ekle">DIV EKLE</button> <div id="panel"> </div> <script> //javascript kodları buraya yazılacak </script> </body> </html> |
#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.
1 2 3 4 5 6 | //javascript kodları buraya yazılacak var panelDiv=document.querySelector("#panel"); var btn=document.querySelector("#ekle");//buton seçilir. var sayac=1; |
#ekle butonuna tıklandığında kodların çalışması için onclick olayını aşağıdaki gibi oluşturuyoruz.
1 2 3 4 5 | btn.onclick=function(){ //kodlar yazılacak } |
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.
1 2 3 4 5 6 7 8 | btn.onclick=function(){ var etiket=document.createElement("div"); //JavaScript ile DIV oluşturma etiket.innerHTML=sayac++; //Oluşturulan div içindeki değeri değiştirme etiket.classList="kutu"; //nesneye .kutu stilini ekleme panelDiv.appendChild(etiket); //nesneyi panel divine ekleme } |
Tüm kodları yazdığımızda 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> <style> .kutu{ width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:20px; font-family: sans-serif; font-weight: bold; background: red; color:white; margin: 5px; float:left; } </style> </head> <body> <button id="ekle">DIV EKLE</button> <div id="panel"> </div> <script> //javascript kodları buraya yazılacak var panelDiv=document.querySelector("#panel"); var btn=document.querySelector("#ekle");//buton seçilir. var sayac=1; btn.onclick=function(){ var etiket=document.createElement("div"); //JavaScript ile DIV oluşturma etiket.innerHTML=sayac++; //Oluşturulan div içindeki değeri değiştirme etiket.classList="kutu"; //nesneye .kutu stilini ekleme panelDiv.appendChild(etiket); //nesneyi panel divine ekleme } </script> </body> </html> |
Yorum Yap