通過點擊按鈕動態添加文本框到表單

Question

我是一名php程序員。我有一個用戶輸入表單，其中一個人應該能夠根據自己的意願添加儘可能多的文本框（輸入多個電子郵件ID） ，通過點擊一個按鈕.eg：他第一次單擊該按鈕時會添加一個附加文本框。他第二次點擊該按鈕，添加另一個文本框......等等。

Answer 1

您可以通過document.createElement創建元素，並通過appendChild它們添加到一個表單，像這樣：

var textbox = document.createElement('input'); 
textbox.type = 'text'; 
document.getElementById('theForm').appendChild(textbox); 

（即假設表單有id =「theForm」，但你可以得到的參考。表格等方式）

如果你想將其包裝在一個標籤，很簡單，太：

var label, textbox; 
label = document.createElement('label'); 
label.appendChild(document.createTextNode('Another email address: ')); 
textbox = document.createElement('input'); 
textbox.type = 'text'; 
label.appendChild(textbox); 
document.getElementById('theForm').appendChild(label); 

Live example

如果你對DOM規範有所瞭解（DOM Core 2是目前支持最廣泛的，就像HTML stuff一樣; DOM Core 3現在得到一些支持），你會發現其他的事情可以做，  —像inserting到表單的中間，而不是追加到最後，等

大多數時候，你可以使用innerHTML來添加到DOM結構（它受到每個主要瀏覽器的支持，並且正在作爲HTML5的一部分進行標準化），但是在表單字段周圍存在一些瀏覽器怪癖，特別是，這就是爲什麼我使用上面的DOM接口。

---

您使用的是圖書館，所以上面的你還沒有說的是純JavaScript + DOM。這很簡單，但在現實世界中，您可能會很快陷入併發症。在這種情況下，像jQuery,Prototype,YUI,Closure或any of several others這樣的JavaScript庫可以節省您的時間，平滑瀏覽器之間的差異和複雜性，讓您專注於您實際嘗試做的事情。例如，在鏈接的例子中，我必須提供一個hookEvent函數來處理某些瀏覽器使用（標準化）addEventListener函數這一事實，而IE9之前的IE使用attachEvent代替。和庫將處理表單字段怪癖我在說什麼，讓您在使用直HTML來指定的字段，如：

使用jQuery：

$("#theForm").append("<label>Another email address: <input type='text'>"); 

Live example

使用Prototype：

$("theForm").insert("<br><label>Another email address: <input type='text'>"); 

Live example