通过单击按钮动态地将文本框添加到表单中

我是一名 php 程序员。我有一个用户输入表单，其中一个人应该能够通过单击按钮添加任意数量的文本框（以输入多个电子邮件 ID）。例如：他单击按钮第一次添加了一个附加文本框。他第二次单击该按钮，添加了另一个文本框......等等。

您可以通过以下方式创建元素document.createElement http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547，并将它们附加到表单中appendChild http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-184E7107，像这样：

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);

实例 http://jsbin.com/otedi5

如果你绕过 DOM 规范（DOM 核心 2 http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/是目前得到最广泛支持的，HTML 的东西 http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/在它的上面;DOM 核心 3 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/现在正在获得一些支持），您会发现其他可以做的事情 - 例如插入 http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727进入中间的形式而不是附加到末尾，等等。

大多数时候，您可以使用innerHTML添加到 DOM 结构（每个主要浏览器都支持它，并且正在作为 HTML5 的一部分进行标准化），但具体而言，围绕表单字段存在一些浏览器怪癖，这就是我使用上面的 DOM 界面的原因。

你还没有说你正在使用一个库，所以上面是纯 JavaScript+DOM。它相当简单，但在现实世界的使用中，您很快就会遇到复杂的情况。这就是像这样的 JavaScript 库的地方jQuery http://jquery.com, 原型 http://prototypejs.org, YUI http://developer.yahoo.com/yui/, Closure http://code.google.com/closure/library, or 其他几个中的任何一个 http://en.wikipedia.org/wiki/List_of_JavaScript_libraries可以节省您的时间，为您消除浏览器差异和复杂性，让您专注于您真正想做的事情。

例如，在链接的示例中，我必须提供hookEvent函数来处理某些浏览器使用（标准化）的事实addEventListener函数，而IE9之前的IE使用attachEvent反而。库将处理我正在讨论的表单字段怪癖，允许您使用直接 HTML 指定字段，如下所示：

Using jQuery http://jquery.com:

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

实例 http://jsbin.com/otedi5/2

Using 原型 http://prototypejs.org:

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

实例 http://jsbin.com/otedi5/3