Turning gears are the logo of co-scripts

Bu fonksiyonla elementin kendi ana elementi içinden kaldırılmasını basitleştirmiş olacağız.

Nesneyi yaratırken yine şu fonksiyondan yararlanabiliriz. 1

 

function nY(hN){return document.getElementById(hN);}; // id den nesne yaratır
function nS(hN){nY(hN).parentNode.removeChild(nY(hN));}; // id den nesne siler
function nSd(hN){hN.parentNode.removeChild(hN);}; // nesne (object)den nesne siler

Birinci satırdaki fonksiyon html elementinin idsini parametre olarak alıp elementi bir değişkene atanmış nesne olarak geri veren fonksiyon (nY). İkinci fonksiyon ise html elementinin idsini parametre olarak alıp 1. fonksiyondan nesneye çevirip sonra ebeveyn elementinin içerisinden onu silen fonksiyon (nS). Üçüncü fonksiyon ise elementin doğrudan kendisini nesne şeklinde parametre olarak alıp ebeveyni içinden kaldıran fonksiyon (nSd). Kodlarımda sıklıkla kullandığım 3 fonksiyon bunlardır.

co-scripts tag image removechildhtml elementi silmeparentnode
ID:226 | Okunma:1612


 

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:2158