Geniş bir yönetim paneli yazıyordum. Sitenin fotoğraf alanında thumbnailler var ve resim seçiminden önce büyük hallerine gözatma ihtiyacı çıktı ortaya. Ayrı sayfada açılmasını istemiyordum ve sayfa öncelikle bir div ekleyerek onun içine innerHTML ile resmi gösterim dedim. Daha sonra bunu AJAX ile yapmaya karar verdim. Ancak iş ilerledikçe ilerliyor, ihtiyaçlar çıktıkça kodları baştan yazıyordum. En sonunda tüm ihtiyaçları belirleyerek son kez kodlamaya karar verdim.

Bu çalışma sırasında hazırladığım ve bir çok kişinin işine yarayacağını düşündüğüm bir kodu anlatacağım.

Başlığımızın konusu olan Js ile Div oluşturan kod şöyle

function yap(){
var varmi = document.getElementById(’d');<em>//d id’li bir dokümanı tanımlıyoruz</em>
if (!varmi){ // eğer bu döküman yok ise oluşturacağız
var newdiv = document.createElement(’div’); //<em>burada bir adet div oluşturuyoruz</em>
newdiv.setAttribute(’id’, “d”);//id’sini d olarak tanımlıyoruz
newdiv.style.width = 300;//genişliğini belirliyoruz
newdiv.style.height = 300;//yüksekliğini belirliyoruz
newdiv.style.position = “absolute”;//pozisyonunu absolute olarak belirliyoruz
newdiv.style.left = 150; //sol boşluğu ayarlıyoruz
newdiv.style.top = 150; //üst taraf boşluğu
newdiv.style.background = “#ff”; //arkaplan rengini belirliyoruz
newdiv.style.border = “4px solid #000″; // kenarlık rengi ve stili
newdiv.style.padding = “5px”; //div dolgusu
document.body.appendChild(newdiv); // en son olarak oluşturduğumuz div’i dosyamıza ekliyoruz
}
}

More >