myNotlar Logo

Yeni oluşturulan bir HTML elementin sayfaya eklenmesi


Internet Explorer Firefox Opera

Bu örnek, createElement ile oluşturulan HTML Elementlerinin sayfaya nasıl ekleneceğini göstermektedir.

createElement ile oluşturulan bir HTML elementinin sayfaya eklenmesi için üç yöntem bulunmaktadır. Bunlar appendChild(), insertBefore() ve replaceChild() metodlarıdır. appendChild() metodu parametre olarak aldığı elementi çağrıldığı element içine ekler. insertBefore() metodu çağrıldığı element altında belirtilen bir elementten önce yeni elementi ekler. replaceChild() metodu ise sadece eklemekten ziyade çağrıldığı element altında bir elementi silerek, yerine yenisini ekler.

Aşağıdaki örnek, createElement ile oluşturulan HTML Div elementlerinin, appendChild, insertBefore ve replacechild metodları ile sayfa üzerindeki ornekDiv isimli bir HTML Div elementi içine eklenmesini göstermektedir. Yeni oluşturulan elementi, insertBefore metodu lastChild özelliğini kullanarak ornekDiv altındaki en son elementten önce ekler. replaceChild() metodu firstChild özelliğini kullanarak ilk elementi değiştirir. appendChild metodu ise standart olarak en sona ekler.

<style type="text/css">
#ornekDiv {
	height:50px;
}
.ornekSinif {
	min-width:50px;
	min-height:20px;
	border:solid 2px green;
	float:left;
}
</style>

<script type="text/javascript">
function divYap(){
	var yeni = document.createElement("div");
	
	yeni.innerHTML = document.getElementById("icerikGiris").value
	
	yeni.className = "ornekSinif";
	return yeni;
}
function appendChild_ile_ekle() {
	var div = document.getElementById("ornekDiv");
	div.appendChild( divYap() );
}
function insertBefore_ile_ekle() {
	var div = document.getElementById("ornekDiv");
	div.insertBefore( divYap(), div.lastChild );
}
function replaceChild_ile_ekle() {
	var div = document.getElementById("ornekDiv");
	div.replaceChild( divYap(), div.firstChild );
}
</script>

<p>Lütfen eklenecek içeriği giriniz :
<input type="text" id="icerikGiris" value="mynotlar.com" />
</p>

<input type="button" value="appendChild ile Ekle" onClick="appendChild_ile_ekle()" />
<input type="button" value="insertBefore ile Ekle" onClick="insertBefore_ile_ekle()" />
<input type="button" value="replaceChild ile Ekle" onClick="replaceChild_ile_ekle()" />

<div  id="ornekDiv" style="padding:3px;">
	<div class="ornekSinif">İçerik - 1</div>
	<div class="ornekSinif">İçerik - 2</div>
	<div class="ornekSinif">İçerik - 3</div>
	<div class="ornekSinif">İçerik - 4</div>
</div>
Test Edin

Lütfen eklenecek içeriği giriniz :

İçerik - 1
İçerik - 2
İçerik - 3
İçerik - 4
İ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 |