Question

我有以下代码：

它似乎不适用于jsfiddle但它在普通网页上几乎正常工作。

我在线找到了代码，但我稍微调了一下，我试图在删除旁边添加一个按钮，以便在当前的下方添加一个新的文本框。我试图为此调用addNew（）函数，但它似乎只是继续而不是只添加一个？

我想调整的另一件事是，这显然增加了一个新的文本框，但我的目标是添加3个下拉列表：/

具体来说，它将如下：

<select id="tags" name="tags" class="tags">
<option value="tags" selected="selected">tags</option>
<option value="agent">agent</option>
<option value="extension">extension</option>
<option value="fileversion" >fileversion</option>
</select>

<select id="operands" name="operands" class="operands">
<option>operands</option>
</select>

<select id="values" name="values" class="values">
<option>values</option>
 </select>

我不确定这样做的最佳方式 - 例如也许把它全部放入div并根据这个div创建一个变量并在addNew函数中复制它？

非常感谢任何帮助。

此致马丁

Answer 1

http://jsfiddle.net/JpYGg/6/

一个重要的变化：

newAddButton.onclick = addNew;

你正在做类似newAddButton.onclick = addNew(){};这样的错误，要么执行函数，即addNew()，要么创建一个匿名函数，即function(){}，尽管没有这样的事情addNew(){}（Java中有类似的东西，但这完全不相关）。

哦和另一个：你在网站和jsfiddle之间看到的差异，是因为你的javascript执行onLoad，这意味着jsfiddle将包装它，而函数addNew中的全局变量将不会显示你的内联事件处理程序（你可能应该改变它）。请注意，我在我的代码段上的no wrap上有。

还有一些微不足道的变化（如计数器增量和分号）没有破坏它，但更多是我的风格。

关于添加新工具箱而不仅仅是文本框，欢迎参加关于正确DOM扩充的火焰战（现在可能已经非常死了）。有两种方法可以解决这个问题（还有更多，但最终都归结为两种方法），或者像你一样建立新的<div>，有很多appendChild和createElement调用，这是使用标准DOM函数的“更清洁”方法。或者你可以使用innerHTML，它接受一个巨大的字符串并自己进行解析。

第一种方法，除了是“更标准”之外，意味着值注入也更正式，所以如果你想改变一个属性，你可以用javascript编码的方式来实现，而不是嵌入字符串中的值，并让浏览器解析它。

第二种方式的主要优点是它更快。更快。对于一些下拉框来说它没有什么区别，但是当你有很多东西需要渲染时，每个DOM函数都会慢一点，而且如果事情需要在它们之间进行渲染的话。

因此，您可以扩展当前方法并添加下拉列表，也可以使用“后门”innerHTML方法。现在做任何感觉更好的事情，只在你需要的时候优化/改变事物（你很可能不会）。

希望这足以让你前进。

动态地将下拉列表添加到html表单

1 个答案: