0

我目前正在学习 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 编写表单时，一切正常。这是表格一部分的图片：

在纯 html 中工作正常

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

无法正常使用 javascript

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

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

4

2 回答 2

1

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

<label>Layer</layer>

我想你的意思是

<label>Layer</label>
于 2012-09-12T13:52:24.490 回答
0

您的问题中没有足够的信息来重新创建问题（缺少很多 CSS 和可能的 HTML）。然而，既然你知道你的 CSS 没有改变，那么一定有一些 HTML 不合适。

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

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

希望这可以帮助。

于 2012-09-12T13:50:21.763 回答