Add to innerHTML without destroying form contents

I have a form that is generated via ajax based of a multi-file uploader (swfupload). It adds more form elements to a given dom element upon the completion of each file uploaded. This thus gives me a problem. If i selected 5 files to upload, the first file will generate a form which I will开发者_StackOverflow社区 start entering data in, however, when the 2nd file is completed uploading, it clears the previous entered data in the form elements and also appends the 2nd form elements.

I think this is because im using:

document.getElementById('test').innerHTML = document.getElementById('test').innerHTML + newformelements;

I think doing the above doesn't keep any entered data in the forms, just the HTML itself.

So, how can I append to this element without destroying what has been put into form fields already? The number of possible children is dynamic based of the multi-uploader.

Are you open to use jquery? If yes then You can easily do something like this

$("#divid").append("html you want to append");

Use DOM manipulation, in this case: Node.appendChild ^[docs].

innerHTML will always destroy and recreate the elements.

Create a new element, set its innerHTML, than append it to the end of the forms' children.