Dynamically Generated Form Field Loses Value When New Field Is Added

I am generating a dynamic fieldset with javascript. For adding fields, I use the following function (this function actually adds more than one field) //add test function addTest()

Solution 1:

Setting the innerHTML of the parent element causes the entire content to be serialized and then re-parsed, losing all the values in the process (the values aren't serialized back into value attributes). I can think of three workarounds:

1. Create your outer div (the testContainer) using createElement, set its innerHTML and then append the div into the parent element
2. Create all the elements using DOM. It's trivial to create a bunch of helper functions to make creating the elements easier.
3. Use jQuery which does all this for you: $(location).append('html goes here');