動態添加下拉列表，以HTML形式

Question

我有以下代碼：

http://jsfiddle.net/JpYGg/4/

它似乎沒有對的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中有類似的東西，但這是tot盟友無關）。

哦和另一個：你看到你的網站和jsfiddle之間的區別，是因爲你的JavaScript執行onLoad，這意味着jsfiddle將包裝它，全局變量，像功能addNew將不會從你的內聯事件中可見處理程序（你可能應該改變它）。請注意，我在我的代碼段上使用no wrap。

也有一些微不足道的變化（如計數器增量和分號）並沒有打破它，但更多的是我的風格。

關於添加一個新的工具箱而不僅僅是一個文本框，歡迎來到關於適當的DOM增強的火焰戰爭（現在可能已經死了）。有兩種方法可以解決這個問題（還有更多的方法，但最終都歸結爲兩種方法），或者像您一樣建立新的<div>，其中有大量appendChild和createElement調用，這是「清潔程序「使用標準DOM功能的方法。或者你可以使用innerHTML，它接受一個巨大的字符串，並會自行解析。

第一種方法除了「更標準」之外，還意味着值注入也更加正式，所以如果您想要改變屬性，例如您以JavaScript編碼的方式進行，而不是嵌入字符串中的值並讓瀏覽器解析它。

第二種方式的主要優點是速度更快。更快。對於一些下拉框來說，這不會有什麼區別，但是當你有很多東西來渲染每個DOM函數時會慢一點，如果需要渲染的話，也是如此。

因此，您可以擴展您當前的方法並添加下拉列表，也可以使用「後門」方法innerHTML。現在做一些更好的事情，只在需要的時候才進行優化/改變（你很可能不會這樣做）。

希望這足以讓你走。