myNotlar Logo

Yeni Bir HTML Elementi Oluşturulması


Internet Explorer Firefox Opera

Bu örnek, bir HTML elementinin nasıl dinamik olarak oluşturulacağını göstermektedir.

Yeni bir HTML Element oluşturulması için JavaScript DOM document nesnesinin createElement() metodu kullanılmaktadır. createElement() metodu parametre olarak aldığı HTML element ismine sahip varsayılan özniteliklerini de belirleyerek yeni bir HTML Düğümü/Elementi oluşturarak döndürür. Bu oluşturulan elementin, sayfa tasarlanırken etiketler ile hazırlanan sayfadakilerden bir farkı yoktur ve bütün HTML element özellikleri ve metodları kullanılabilir. Bunun yanında, createElement() ile oluşturulan bir HTML elementinin appendChild, insertBefore veya replaceChild gibi metodlarla HTML dokümana eklenerek doküman ağacına dahil edilmesi gereklidir. Ayrıca bakınız : "createElement ile oluşturulan HTML Elementlerinin sayfaya eklenmesi"

Aşağıdaki örnek, genişlik, yükseklik ve arka plan rengi, width, height, background-color ve float DOM Style (CSS) özellikleri ile belirlenerek yeni bir HTML DIV Elementi oluşturan divYap fonksiyonunu ve bu metot ile oluşturulan yedi elementin appendChild ile sayfaya eklenmesini göstermektedir.

<script type="text/javascript">

function divYap(genislik, yukseklik, arkaplan)
{
	var yeni = document.createElement("DIV");
	
	yeni.style.width = genislik + "px";
	yeni.style.height = yukseklik + "px";
	yeni.style.backgroundColor = arkaplan;
	yeni.style.cssFloat = "left";
	yeni.style.styleFloat = "left";
	return yeni;
}
function divYap_Test()
{
	var alan = document.getElementById("ornekAlan");
	
	alan.appendChild( divYap(20,10, 'blue') );
	alan.appendChild( divYap(30,30, 'green') );
	alan.appendChild( divYap(40,20, 'red') );
	alan.appendChild( divYap(50,10, '#F0A000') );
	alan.appendChild( divYap(40,40, '#A0F000') );
	alan.appendChild( divYap(15,15, '#00A0F0') );
	alan.appendChild( divYap(10,10, '#00F090') );
}
</script>

<input type="button" value="HTML DIV Elementi Oluştur" onClick="divYap_Test()" />

<table><tr><td id="ornekAlan" width="100">
</td></tr></table>
Test Edin

Not : createElement ile yeni bir HTML oluşturmak için sadece element adını parametre olarak aktarmak yeterlidir. Bunun yanında, aşağıda gösterildiği gibi oluşturulması da mümkündür ve Internet Explorer ile bir sorun çıkartmaz. Fakat, bazı elementlerde öznitelikler eklenmeyerek sorun çıkartabilir. Bu yüzden, sadece element adı ile oluşturarak özniteliklerini harici olarak atamak daha uygun ve garanti olacaktır.

    document.createElement("<img alt='Test' src='resim.gif' />");

Aşağıdaki örnek, belirtilen bir başlık ve konu içeriğinin HTML H3 ve HTML P elementleri ile oluşturarak sayfaya eklenmesini göstemektedir.

<script type="text/javascript">
function konuEkle()
{
	var yeniH3 = document.createElement("H3");
	var yeniP = document.createElement("P");
	
	yeniH3.innerHTML = document.getElementById("ornekBaslik").value;
	yeniP.innerHTML = document.getElementById("ornekIcerik").value;
	
	yeniH3.style.borderBottom = "solid 2px black";
	yeniP.style.wordSpacing = "5px";
	
	var konuCerc = document.getElementById("ornekDiv");
	
	konuCerc.appendChild(yeniH3);	
	konuCerc.appendChild(yeniP);
}
</script>

<table><tr><td width="240" valign="top">

<p>Yeni Başlık : <input type="text" id="ornekBaslik" 
	value="Lorem ve Ipsum Kardeşler Parkta!" /></p>

<p>İçerik :</p>
<textarea id="ornekIcerik" cols="25" rows="5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

</td><td width="100" valign="top">
<input type="button" value="Konuyu Ekle!" onClick="konuEkle()" />

</td><td valign="top">
<div id="ornekDiv" style="width:100%; height:100%;"></div>
</td></tr></table>
Test Edin

Yeni Başlık :

İçerik :

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |