myNotlar Logo

document.createElement()


Internet Explorer Firefox Opera

document.createElement metodu, herhangi bir HTML elementinin oluşturulmasını sağlar.

Internet Explorer 4.0, sadece img, area ve option elementlerini oluşturabilir. IE 5.0, frame ve iframe hariç tüm elementleri oluşturabilir.

Sözdizimi

elemNesne = document.createElement(etiketAdi)
etiketAdiOluşturulacak elementin etiket adı. Örneğin, table, td, b, div vs.

Dönüş Değeri

elemNesneOluşturulan yeni element.

createElement metodu ile oluşturulan elementler, varsayılan özellik değerleri ile oluşturulurlar. Örneğin, oluşturulan bir input elementinin type özelliği varsayılan olarak metin kutusu görevi gören text değerindedir. Bu yüzden, sadece input elementi için değil, tüm oluşturulan elementler için en azından id gibi gerekli bir kaç özellik belirtilmelidir.

Oluşturulan elementler, varsayılan olarak dokümanın kendisine veya içerdiği body gibi herhangi bir koleksiyona bağlı değildir. Bu yüzden, insertBefore veya appendChild metodlarından uygun olanı ile dokümana eklenmelidir.

HTML elementleri oluşturulurken olası hatalara karşı element isimlerine dikkat edilmelidir. Çünkü örneğin, div ismi yerine dic gibi bir harf hatası yapılması sonucunda tarayıcılar herhangi bir hata vermez ve dic elementini oluşturur.

Aşağıdaki örnek, document.createElement metodu ile belli özelliklere sahip, belirtilen miktarda yarı saydam div oluşturularak body içine yerleştirilmesini göstermektedir.

<table>
   <tr>
      <td>Element Miktarını Seçiniz</td>
      <td>
         <select id="miktarGiris" name="select">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="10">10</option>
           <option value="15">15</option>
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
         </select>
      </td>
   </tr>
</table>

<input type="button" value="Tablo Oluştur" onClick="divYap()"/>
<input type="button" value="Tablo Sil" onClick="tabloSil()"/>

<div id="ornekKap"></div>

<script type="text/javascript">
function renkVer()
{
   var rakam = parseInt( Math.random()*15 );
   switch(rakam)
   {
       case 0 : return 'black';
	   case 1 : return 'blue';
	   case 2 : return 'red';
	   case 3 : return 'yellow';
	   case 4 : return 'green';
	   case 5 : return 'silver';
	   case 6 : return '#55FF77';
	   case 7 : return '#AABBCC';
	   case 8 : return '#AAEE99';
	   case 9 : return '#008800';
	   case 10: return '#880000';
	   case 11: return '#000088';
	   case 12: return '#E0E000';
	   case 13: return '#00E0E0';
	   case 14: return '#E000E0';
   }
}
function bicimAyarla(nesne)
{
	nesne.style.position = 'absolute';
	nesne.style.left = parseInt( Math.random()*600 )+'px';
	nesne.style.top = parseInt( Math.random()*1300 )+'px';
	nesne.style.width = '80px';
	nesne.style.height = '80px';
	nesne.style.backgroundColor = renkVer();
	nesne.style.opacity = '0.5';
	nesne.style.filter = 'alpha(opacity=50)';
}
function divYap()
{
	var secim = document.getElementById('miktarGiris');
	var miktar = secim.options[secim.selectedIndex].value;
	for(a = 0;a < miktar;a++)
	{
		var divElem = document.createElement('div');
		bicimAyarla(divElem);
		document.getElementById('ornekKap').appendChild(divElem);
	}
}
function divSil()
{
	var Kap = document.getElementById('ornekKap');
	while(Kap.firstChild != null)
	{
		Kap.removeChild(Kap.firstChild);
	}
}
</script>
Test Edin
Element Miktarını Seçiniz
İ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 | Oyunlar |