DOM erişimi ile Tarayıcı Tarafında Dinamik Olarak İçerik oluşturulması


Bazı web sayfalarında görmüşsünüzdür belli bir yere tıkladığınızda anında arama çubuğu oluşuverir.  Bu işlem Javascript ile HTML dökümanının düğümlerine erişim ile olur. İşi yapan Javascriptteki createElement, appendChild ve removeChild metotlarıdır.

Aşağıda bu işlemi yapacak bir kod göreceksiniz:

function arama_formu()
{

var formtag = document.createElement(‘form’); // FORM TAGI OLUSTURULUYOR
var form_yazi=“ARAMA:”;
//formtag.innerHTML=form_yazi;
formtag.setAttribute(“name”,“form1”);
formtag.setAttribute(“method”,“GET”);
formtag.setAttribute(“target”,“_blank”);
formtag.setAttribute(“action”,“http://www.google.com.tr/search?site=&hl=tr”);
var inputtag=document.createElement(“input”);
inputtag.setAttribute(“type”,“text”);
inputtag.setAttribute(“id”,“q”);
inputtag.setAttribute(“name”,“q”);

var dugme=document.createElement(“input”);
dugme.setAttribute(“type”,“submit”);
dugme.setAttribute(“id”,“button”);
dugme.setAttribute(“name”,“button”);
dugme.setAttribute(“value”,“Ara”);

var fani=document.getElementById(“fani”);
var fanidugme=fani.firstChild;
fani.removeChild(fanidugme);

formtag.appendChild(inputtag);
formtag.appendChild(dugme);

document.getElementById(‘apDiv1’).setAttribute(“class”,“tbar”);
document.getElementById(‘apDiv1’).appendChild(formtag);

}

SUAT ATAN AJAX DERSLERÄ°

<!–
#apDiv1 {
position:absolute;
left:3px;
top:8px;
width:507px;
height:29px;
z-index:1;
}
#q{
background-color: #FFFF99;
}
–>



Bu kodların çalışır hali için

http://suatatan.com/ajax/arge1/arama_formu_olustur.htm

Ancak bu kodlar şu an itibari ile Mozilla Firefox altında çalışmamaktadır. Nedeni bulunduğunda yeni versiyonu yazılacaktır.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s