insertBefore fonksiyonu, elementin belirtilen bir alt elementinden önce yeni bir düğüm ekleyerek, yeni eklediği düğümü döndürür.
Sözdizimi
eklenen = element.insertBefore(yeni, hedef)
| yeni | Yeni eklenecek düğüm. |
| hedef | Kendinden önce yeni element'in ekleneceği düğüm. |
Dönüş Değeri
| eklenen | Eklenen düğüm. ('yeni' ile aynı) |
Aşağıdaki örnek, bir tablo satırında bulunan iki hücreden ikincisinden önce document.createElement ile oluşturulan yeni bir elementin insertBefore metodu ile eklenmesini göstermektedir.
<input type="button" value="Ekle" onClick="Ekle()"/>
<table id="ornekTablo">
<tr id="ornekSatir">
<td id="ornekHucre1">Hücre-1</td>
<td id="ornekHucre2">Hücre-2</td>
</tr>
</table>
<script type="text/javascript">
function renkVer()
{
var rakam = parseInt( Math.random()*10 );
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';
}
}
function Ekle()
{
var yeniEleman = document.createElement('td');
var refEleman = document.getElementById('ornekHucre2');
var anaEleman = document.getElementById('ornekSatir');
yeniEleman.style.backgroundColor = renkVer();
yeniEleman.innerHTML = ' ';
anaEleman.insertBefore( yeniEleman, refEleman );
}
</script>
Test Edin