Javascript（innerHtml）搞乱HTML select标签

Question

我目前正在学习HTML，PHP，JavaScript和其他有趣的网络内容。此时，我设法用HTML，CSS和PHP创建了一个漂亮的Web表单。

前几天我想用JavaScript添加一些动态选项，但现在我正在打一堵墙。我没有将我的表单写入html文件，而是决定将其放入.js文件并通过javascript构建。以下是我的表现：

<!-- 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>';
....

这是我的“选择”，“输入”和“标签”标签的CSS代码

#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;
}

当我用纯HTML编写表单时，一切都很完美。这是表格的一部分图片：

但是当我使用innetHTML +在javascript中编写它时，除了drop box（选择字段）之外，一切似乎都正常工作：

我有点困惑，因为css保持完全相同。此外，如果我尝试在第一个文本字段下添加另一个文本字段，那么一切都会很好并且格式良好。

由于我是网络开发的新手，我想我错过了一些大事？另外，我很确定插入代码就像我正在做的那样是不对的，但是现在它几乎运行良好;）

Answer 1

我不知道它是否是解决方案，但在你的JS中，有：

<label>Layer</layer>

我认为你的意思是

<label>Layer</label>

Answer 2

您的问题中没有足够的信息来重新创建问题（缺少大量CSS和可能的HTML）。但是，由于您知道您的CSS没有变化，因此必须有一些HTML不合适。

JavaScript创建HTML元素的方式必须与静态HTML不同。在单独的窗口中打开这两个页面，并使用Firebug（适用于Firefox）或开发人员工具（位于Chrome中）检查每个页面生成的HTML（HTML /元素选项卡）。找出差异并在JavaScript中更正它。

很可能你只是错误输入或错误放置了一两个元素。

希望这有帮助。