View Full Version : How to re-arrange DOM after inserting some extra elements of form via innerHTML ?

09-04-2006, 06:11 AM

I have an HTML page. which contain a form. but according to requirements (user selections of SELECT control ), I am inserting some more elements to form by innerHTML.

But problem is DOM doesnt entertain newly inserted element.

e.g. document.forms[0].my_new_inserted_element.value // Returns undefined or Object error.

It's problem of Firefox and Opera. In I.E. its working nicely.

And createTextNode & appendChild is to lengthy procedue for me to insert elements & setting it's property.

Is there any way?, After insering new elements into FORM via innerHTML , we can re-arrange the DOM. So, that firefox & opera consider newly inserted elements for javascript validation ????

09-04-2006, 06:13 PM
Most likely, if you inserted valid innerHTML into a valid location on the page to begin with, this wouldn't be a problem. It is very tricky though, especially with forms, to do this in a valid manner, perhaps impossible in some cases. Using the DOM to go back and 'repair' a mistake made using innerHTML is silly though. It could not possibly take that much more code to insert the new content properly using the DOM in the first place.

09-04-2006, 11:32 PM
Furthermore, Konqueror does not like innerHTML. Technically, it supports it, but in my experience it is very buggy. My advice is to just avoid the use of innerHTML

09-05-2006, 12:12 AM
e.g. document.forms[0].my_new_inserted_element.value // Returns undefined or Object error.For a start, you should be using the elements collection:
document.forms[0].elements.my_new_inserted_element.valueSecondly, I don't know if this is what you've run into here or not, but you've set yourself up to be bitten by the most common innerHTML problem in the book: it clears all non-serialised data, and that includes form values. Thus, when you add an element to the form using the select, the select will immediately be not only reset to its default value, but actually destroyed and created anew, as will all the other form elements -- which will likely result in the required removal of the new element.

As jscheuer1 and blm126 have said, stay away from innerHTML -- especially where forms are involved.