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

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

实例

如果你开始使用DOM规范(DOM Core 2是目前支持最广泛的,就像它上面的HTML内容一样; DOM Core 3现在得到一些支持),你会发现其他你可以做的事情 -喜欢在中间插入表格而不是追加到最后等.

大多数情况下,您可以使用innerHTML添加到DOM结构(它受到每个主要浏览器的支持,并且作为HTML5的一部分得到标准化),但是在表单字段周围存在一些浏览器怪癖,这就是为什么我走了使用上面的DOM接口.

你没有说你正在使用一个库,所以上面是纯JavaScript + DOM.它相当简单,但在实际使用中,您可以快速遇到并发症.这就是jQuery,Prototype,YUI,Closure或其他任何一个JavaScript库可以为您节省时间,平滑浏览器差异和复杂性,让您专注于您实际尝试的内容.

例如,在链接的示例中,我必须提供一个hookEvent函数来处理某些浏览器使用(标准化)addEventListener函数的事实,而IE9之前使用IE attachEvent代替.并且库将处理我正在谈论的表单字段怪癖,允许您使用直接HTML指定字段,如下所示:

使用jQuery:

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

实例

使用原型:

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

实例