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

【问题标题】：dynamically adding textboxes to a form by the click of a button通过单击按钮将文本框动态添加到表单中
【发布时间】：2011-01-22 08:46:31
【问题描述】：

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

【问题讨论】：

标签： javascript

【解决方案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

【讨论】：