Chris: appendChild in Form, Positionierung

Guten Tag,

Ich möchte dynamisch Inputfelder des Types "file" in ein Formular einfügen.

var objForm = document.getElementById('TC_Form_UTG');

var objInput = document.createElement('input');

objInput.setAttribute('id','file_'+strMode);
objInput.setAttribute('name', 'file_'+strMode);
objInput.setAttribute('type', 'file');
objInput.setAttribute('onchange', 'addValidationFile(''+strMode+'', this.value, this.id);');

//add new file input field to the form
objForm.appendChild(objInput);

nun ist es ja logisch, dass das input feld, zu oberst im Form eingefügt wird und dort auch angezeigt. Ich möchte dies aber an einem speziellen Ort platzieren.

Zuerst habe ich versucht das Element direkt an ein Div Objekt zu hängen, welches auch noch im Scope von <form> </form> ist.

Also irgendwie so was
<form>
<div id="vieleAndereFormElemente"></div>
<div id="anEinerStelle"></div>
</form>

var divToAddField = document.getElementById('anEinerStelle');
divToAddField.appendChild(objInput);

Mit dieser Variante wird das neue Input Feld zwar an der richtigen Stelle eingefügt, es fügt sich aber nicht am Form an, daher die im Input Feld angegebene Datei wird nicht hochgeladen.

Meine Frage nun: Wie kann ich ein Element in ein Formular einfügen und dies noch entsprechend platzieren, so dass sein Elternobjekt das Formular ist.

Ich hoffe ich habe mich einigermassen verständlich ausgedrückt...

Danke für Lösungsansätze.

Chris

  1. nun ist es ja logisch, dass das input feld, zu oberst im Form eingefügt wird und dort auch angezeigt.

    es sollte im Gegensatz zu deiner Aussage genau am Ende erscheinen

    Meine Frage nun: Wie kann ich ein Element in ein Formular einfügen und dies noch entsprechend platzieren, so dass sein Elternobjekt das Formular ist.

    Es gäbe die hierfür passende Möglichkeit insertBefore