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:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

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);

} </script> SUAT ATAN AJAX DERSLERİ </head>

</html> 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.