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

我是一名php程序员。我有一个用户输入表单，在这个表单中，一个人可以通过点击按钮添加任意多个文本框（输入多个电子邮件ID）。例如：他第一次点击按钮，添加了一个额外的文本框。他第二次点击按钮，添加了另一个文本框…等等。

您可以通过创建元素，并通过将它们附加到表单，如下所示：

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

如果你围绕DOM规范（现在是最广泛支持的，现在是它的顶层；现在得到一些支持），你会发现你可以做的其他事情-比如在中间的形式，而不是追加到结尾，等等。 大多数情况下，您可以使用

innerHTML

添加到DOM结构中（每个主流浏览器都支持它，并且作为HTML5的一部分正在标准化），但表单字段周围存在一些浏览器怪癖，具体来说，这就是我选择上面的DOM接口的原因

---

您没有说过您正在使用一个库，因此上面的内容是纯JavaScript+DOM。这相当简单，但在实际使用中，您可能会很快遇到复杂情况。这就是像、、或这样的JavaScript库可以为您节省时间的地方，为您消除浏览器的差异和复杂性，让您能够专注于实际要做的事情

例如，在链接的示例中，我必须提供一个

hookEvent

函数来处理一些浏览器使用（标准化的）

addEventListener

函数的事实，而IE9之前的IE使用

attachEvent

。库将处理我所说的表单字段怪癖，允许您使用直接HTML指定字段，如下所示：

使用：

$（“#theForm”）.append（“另一个电子邮件地址：”）；

使用：

$（“theForm”）。插入（
另一个电子邮件地址：）；

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

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