Autonomous Machine

Use valid markup in your jQuery DOM creation

I just spent almost an hour trying to figure out why some really basic DOM creation/insertion and JavaScript-initiated form submission wasn't working in IE7 (everything was OK in FireFox). I could have saved a lot of time by checking everything from the beginning, but I noticed a form element wasn't getting appended to the DOM and so I tried debugging that for a while before checking if I even had a valid DOM element to append. I didn't, and after a few minutes of troubleshooting I found the root cause of all my troubles- I had been using invalid markup to create the form element. I changed:

f = $('<form>');


f = $('<form />');

and everything started working. I was using the (admittedly invalid) lone opening tags without a thought after seeing that form in several jQuery tutorials and, not being that familiar with jQuery, thinking it was a supported syntax.

So, always use valid markup everywhere and avoid this kid of bug.