[JavaScript]Dodawanie kolejnych textboxów po kliknięciu na button Opcje

[danon198901]

Witam,

z javascript miałem bardzo mało do czynienia (głównie PHP), ale uczę się na bieżąco robiąc własne projekty. W chwili obecnej mam ciężki orzech do rozgryzienia. Chciałbym dodać opcję, że po kliknięciu użytkownikowi pojawiają się 2 nowe textboxy obrazujące współrzędne 'x' oraz 'y'.

A więc jest sobie na stronce button po kliknięciu na który textboxy mają być dodawane i kolejno otrzymywać inne name oraz id (np.: x1,x2,y1,y2 itd) ze względu na dalszą obsługę przez interpreter php. Czyli pierwsze kliknięcie = jeden textbox X oraz Y. Dziesięć kliknięć na button = 10x textbox X oraz 10x textbox Y.

Z wcześniejszego tematu na forum dowiedziałem się mniej więcej jak dodawać przez JS elementy HTML - jednak nadal nie do końca to "kminię".

Przykładowy kod dodający buttona, wyszperany w sieci:

[HTML] pobierz, plaintext 
<button onclick="myFunction()">Try it</button>
 
<script>
 
function myFunction()
{
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
};
 
</script>
[HTML] pobierz, plaintext 

Mi chodzi dokładnie o coś takiego, z tym, że chcę, aby kolejne textboxy otrzymywały inne 'name' oraz 'id'. Może ktoś zna jakiś ciekawy tutorial odnośnie tego zagadnienia, bo ja się w google naszperałem, a w kursach online po prostu tego brakuje.

[danon198901]

A więc reasumując jak dokładnie to zrobić, bo nadal nie rozkminiłem tego (poza teoria zagnieżdżenia jednego appendChild'a w drugim)(IMG:style_emoticons/default/sad.gif)
Na moim przykładzie jak powinno wyglądać umieszczenie generowanych inputów wewnątrz tagu <center></center>?

[PHP] pobierz, plaintext 
<input type="button" value="Dodaj" id="dodajp" onClick="dodaj()" />
 
<script type="text/javascript">
 
var licznik=0;
function dodaj()
{	
	licznik++;
	var obj = document.createElement("INPUT");
	obj.setAttribute('type', 'text');
	obj.setAttribute('size', '2');
	obj.setAttribute('maxlength', '2');
	obj.name = "od"+licznik;
	obj.id = "od"+licznik;
 
	var objSec = document.createElement("INPUT");
	objSec.setAttribute('type', 'text');
	objSec.setAttribute('size', '2');
	objSec.setAttribute('maxlength', '2');
	objSec.name = "do"+licznik;
	objSec.id = "do"+licznik;
 
	var cent = document.createElement("CENTER");
	document.body.appendChild(obj);
	document.body.appendChild(objSec);
	var ent = document.createElement("BR");
	document.body.appendChild(ent);
 
}
</script>
[PHP] pobierz, plaintext 

Chyba należę do tych "ciężej rozumujących" - muszę zobaczyć, bo nie "skapuję" tego:(