Turning gears are the logo of co-scripts

Javascript ile sayfamıza dinamik olarak bir element ekleyebiliriz. Bu element tamamen script tarafından yaratılıp sayfaya gömülmektedir. Teorik olarak tüm html elementlerini yaratabilir ve sayfaya gömebilir yada bağlayabiliriz. Havada (on the fly) yapılan bu işlemler sayfanın refresh olması ile eski haline döner. Bu işlemleri kalıcı kılmak istersen sayfamızın sunucuda oluşumuna bu nesneleri eklememiz gerekir.

Bunu script ile nesneyi oluşturan komut dizisinde ajax tekniği ile sunucuya verileri göndererek sunucuda veri tabanına kayıt edilmesini sağlayabiliriz. Böylelikle sayfa yeniden oluşurken veri tabanından faydalanıldığında dinamik olarak yaratılmış nesnemiz statik olarak sayfamızda yer alabilir.

Ancak bu tekniğin en sık kullanımı geçici olarak yaratılıp sayfanın sonraki çağrılarında yer almayacak veya iş bittiğinde sayfadan geri kaldırılacak alanlardır.

var yeniElement = document.createElement("P"); // paragraf elementi
var yeniElement2 = document.createElement("input"); // input elementi, tipi ayrıca belirlenebilir.
// Element oluşunca iş bitmiyor. Sayfada render olması için sayfaya eklememiz gerek
document.body.appendChild(yeniElement);
document.body.appendChild(yeniElement2);
// Böylece döküman gövdesine ekledik.
// İstersek belirli bir elementin child elementi olarakta ekleyebiliriz.

İstendiği taktirde nesnelere iç nesneler veya metinler eklenebilir. Nesnelerinize tipine göre özellik atayabilirsiniz.

Tüm nesnelerde kullanılabilecek olan .id özelliği sayfadaki herhangi bir yerden .getElementbyId(nesneIDsi); ile kullanılabilir.

Nesne ile işiniz bittiğinde sayfadan kaldırmak isterseniz benzer şekilde.

document.body.removeChild(yeniElement);
// veya alternatif bir çözüm olarak sadece nesneyi içeren bir üst ebeveynden nesneyi kaldırabilirsiniz
yeniElement.parentNode.removeChild(yeniElement);

Bu iki kullanım kendi başlarına birer fonksiyona çevrilebilir. Js sayesinde ihtiyaç duyulan elementi yaratıp işimiz bittiğinde de kaldırmak bize masrafsız ve hızlı çözümler sunar.

co-scripts tag image createelementremovechildparentnodeappendchild
ID:207 | Okunma:2103

İlişkili Olabilecek Konular
HTML Nesnesi Silme-Ortadan Kaldırma