[JavaScript] input felder dynamisch einfügen

[joextra]

hallo,

ich will per js neue input felder dynamisch an einer bestimmten position einfügen. das mache ich mit folgender funktion:

function doIt() {
	content = document.getElementById('newElBG').innerHTML;
	document.getElementById('newElBG').innerHTML = content + '<input type="text" name="bgText[]" id="bgText" value="" class="inputText" style="width:338px;"><br>';
}

eingefügt wird es hier:

<div id="newElBG"></div>
	<input type="button" name="newElBG" onClick="doIt()" value="neues Element hinzufügen" class="inputButton">

klappt auch beim ie wunderbar. ff macht aber probleme. wenn man ein neues element erstellt, werden die werte der vorherigen elemente nicht übernommen sondern gelöscht, was aber nicht passieren darf. weiß jemand wieso die value beim ff nicht übernommen wird?

[Cheadle]

Firefox macht eigentlich nur, was du ihm sagst. Ein Teil des Qelltextes wird mit innerHTML entnommen und anschließend komplett überschrieben. Da die Werte der Felder so gesehen nicht im Quelltext stehen, können die auch nicht gelesen werden.

Sauberer geht's mit dem DOM und document.createElement() bzw. appendChild()

http://de.selfhtml.org/javascript/objekte/node.htm

[joextra]

so habe ich es anfangs gemacht. habe dazu diese funktion benutzt:

function buildNewElement(parentID, childID) {
	var newFields = document.getElementById(parentID).cloneNode(true);
	var newField = newFields.childNodes;
	var insertHere = document.getElementById(childID);
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

aufruf:

<div id="newElST"></div>
<div id="parentSTBG">
<input type="text" name="stText[]" value="" class="inputText" style="width:290px;"><br></div>
<input type="button" name="newElST" onClick="buildNewElement('parentSTBG', 'newElST')" value="neues Element hinzufügen" class="inputButton">

das problem dabei ist, das wenn das elternelement gefüllt ist, der text beim klonen in die kinderelemente mit übernommen wird. das sollte aber nicht passieren. die kinderelemente sollen aber leer sein. das krieg ich aber nicht hin. deswegen habe ich es mit innerHTML probiert, und es schien zu klappen ... bis ich es mit ff getestet habe

[krel]

wie wärs denn wenn du das neue Feld nicht klonst, sondern eine neues anlegst

var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'stText[]');
//usw je nachdem welche Attribute das Tag noch haben soll
document.getElementById('newElBG').addChild(input); 

(ungetestet)

[joextra]

danke für deinen vorschlag. habe den grad getestet (musst aber addChild druch appendChild ersetzen). klappt zwar ganz gut, gibt aber zwei probleme:
1. class wird beim ie nicht übernommen
2. ich kann kein <br> für eine neue zeile einfügen (soll ja nicht alles nach ein ander eingefügt werden)
die sache ist auch das es nicht nur ein inputfeld ist, sondern mehrere und ich muss dazwischen auch etwas html einfügen.

[Kropff]

1. class wird beim ie nicht übernommen

vielleicht hilft dir das hier weiter.

peter

[joextra]

na gut, aber es geht hier ja nicht nur um die class. ich will ja dazwischen auch html elemente einfügen, und das geht ja damit nicht.
das was ich brauche ist so etwas wie innerHTML, das aber nur elemente hinzufügt und die bestehenden nicht überschreibt.

[krel]

natürlich kannst du auch ein <br /> einfügen

document.getElementById('newElBG').appendChild(document.createElement('br')); 

umrühren fertig
alle HTML Elemente kannst du mittels dieser Funktionen erzeugen und hinzufügen, das ist ja grad das tolle

[joextra]

ich habe jetzt eine einfachere möglichkeit gefunden bei der ich die obere funktion buildNewElement verwenden kann.
ich füge das div, das geklont werden soll einfach ein "unsichtbares" div rum.
also so:

<div style="visibility:hidden; display:none">
<div id="parentElBG"><input type="text" name="bgText[]" id="bgText" value="" class="inputText" style="width:338px;"><br></div>
</div>

das klappt ganz gut. ok, ff zickt etwas (übernimmt die werte des letzten inputs), aber das ist nicht so schlimm. das komisch ist nur, das bei einem reload (beim ff), die value vom hauptelement erhalten bleibt.