Question

我是一名php程序员。我有一个用户输入表单，其中一个人应该可以通过点击按钮添加尽可能多的文本框（以输入多个电子邮件ID）。点击：点击该按钮第一次添加了一个附加文本框。第二次单击该按钮，添加了另一个文本框....依此类推。

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使用{{1}相反。并且库将处理我正在讨论的表单字段怪癖，允许您使用直接HTML指定字段，如下所示：

使用jQuery：

attachEvent

Live example

使用Prototype：

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

Live example

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

1 个答案: