Javascript(innerHtml) messing with HTML select tag

Question

I'm currently learning about HTML,PHP,JavaScript and other fun web stuff. At this point, I managed to create a nice web form all with HTML,CSS and PHP.

Some days ago I wanted to add some dynamic options with JavaScript but now I'm hitting a wall. Instead of having my form written into a html file, I decided to put it into a .js file and have it built by javascript. Here's how I'm doing it :

<!-- Insert the form into <div id=field> -->
...
document.getElementById(field).innerHTML +=
'<label>Name'
   +'<span class="small">ex: stg_testdb1</span>'
+'</label>'
+'<input type="text" name="name" id="name" />';

document.getElementById(field).innerHTML +=
'<label>Layer</layer>'
 +'<span class="small">ex: stg_testdb1</span>'
 +'<select name="layer" id="layer"/>'
   +'<option value="Development">D</option>'
   +'<option value="QA">A</option>'
   +'<option value="Staging">S</option>'
   +'<option value="Production">P</option>';
 +'</select>';
....

And here is my CSS code for the "select", "input" and "label" tags

#stylized select{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:145px;
float:left;
}

When I write my form in pure HTML, everything works perfectly. Here is a picture of a part of the form :

But when I write it in javascript using innetHTML += everything seems to work fine except for drop box (the select field) :

I'm a bit confused since the css stay exactly the same. Also, if I try to add another text field under the first one, everything will be fine and well formated.

Since I'm new into web development, I guess I'm missing something big? Also, I'm pretty sure that inserting code as I am doing is not the right thing to do, but for now it's almost working well ;)

Answer 1

I don't know if it's the solution, but in your JS, there is:

<label>Layer</layer>

I think you meant

<label>Layer</label>

Answer 2

There is not enough information in your question to re-create the problem (missing a lot of CSS and possibly HTML). However, since you know your CSS is not changing, there must be some HTML out of place.

The way your JavaScript creates the HTML elements must differ from the static HTML. Open up both pages in separate windows and use Firebug (for Firefox) or Developer Tools (in Chrome) to inspect the generated HTML for each page (HTML/Elements tab). Find the difference and correct it in your JavaScript.

Most likely you just mis-typed or mis-placed an element or two.

Hope this helps.