Javascript(innerHtml)搞乱了 HTML 选择标签

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

这是我的“select”、“input”和“label”标签的 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 中编写它时，除了下拉框(选择字段)之外，一切似乎都工作正常:

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

由于我是 Web 开发的新手，我想我错过了一些重要的东西？另外，我很确定像我这样插入代码不是正确的做法，但现在它几乎运行良好；)

Answer 1

我不知道这是否是解决方案，但在您的 JS 中，有:

<label>Layer</layer>

我想你的意思是

<label>Layer</label>