通过点击按钮动态添加文本框到表单

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