Dynaaminen HTML ja DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi
IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

DOM 1 - esimerkki 2

Tässä esimerkissä luomme ja vaihdamme esimerkkien sijaintia dynaamisesti. Ohjelmointikielenä käytämme JavaScriptiä, mutta koska metodit ovat samat kaikissa kielissä, voi samaa koodia käyttää hyvin pienillä muutoksilla myös VBScript tai Java ympäristössä.


<script language="javascript">

function korvaa () {


	var elementti;
	elementti = document.lomake.elementinNimi.value;

	var sisalto;
	sisalto = document.lomake.elementinSisalto.value;

	var indeksi;
	indeksi = document.lomake.elementinIndeksi.value;

	var solmut = 0;
	solmut++;
	
	//luodaan uusi elementti ja sisalto
	var uusiElementti= document.createElement(elementti);
	var uusiElementtiSisalto = document.createTextNode(sisalto);

	// ja liitetaan ne toisiinsa
	uusiElementti.appendChild(uusiElementtiSisalto);

	//Haetaan olemassaolevat elementit
	var vanhaElementti = document.getElementsByTagName(elementti);
	//ja korvataan ensimmäinen uudella elementilla
	vanhaElementti[indeksi].replaceNode(uusiElementti);

	alert("Korvattava on "+ indeksi + ". <" + elementti + "> elementti! ");
}


function vaihda () {

	var elementti;
	elementti = document.lomake2.elementinNimi.value;

	var indeksi;
	indeksi = document.lomake2.indeksi.value;

	var uusiIndeksi;
	uusiIndeksi = document.lomake2.uusiIndeksi.value;

	//Haetaan olemassaolevat elementit
	var vanhaElementti = document.getElementsByTagName(elementti);

	//ja vaihdetaan keskenään
	//vanhaElementti[indeksi].swapNode(vanhaElementti(uusiIndeksi));

	alert("Vaihdetaan elementti "+ elementti + " indeksista " + indeksi + " indeksiin " + uusiIndeksi + " ");
	//alert("ok");
}

</script>

---

<form action="" method="POST" name="lomake" >
<p>Elementti
<input type="Text" name="elementinNimi" id="elementti"><br>
Arvo
<input type="Text" name="elementinSisalto" id="sisalto"><br>
Indeksi
<input type="Text" name="elementinIndeksi" id="indeksi"><br>

<input type="Submit" onClick="korvaa()">
</form>


<hr>

<form action="" method="POST" name="lomake2" >
<p>Elementti
<input type="Text" name="elementinNimi" id="elementti"><br>
Indeksi
<input type="Text" name="indeksi" id="indeksi"><br>
Uusi Indeksi
<input type="Text" name="uusiIndeksi" id="uusiIndeksi"><br>

<input type="Submit" onClick="vaihda()">
</form>

Tutustu artikkelin muihin osiin:
»»» DHTML ja DOM »»» DOM 1
»»» DHTML ja DOM »»» DOM 1 - esimerkki 1.
»»» DHTML ja DOM »»» DOM 1 - esimerkki 2

Dynaaminen HTML ja DOM

DOM 1 - esimerkki 2

Tallenna tämä sivu kirjanmerkkeihin!