Javascript 通过单击按钮将文本框动态添加到表单
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4766941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically adding textboxes to a form by the click of a button
提问by Pushan
I am a php programmer .I have a user input form in which a person should be able to add as many text boxes (to enter muliple email ids ) as he wishes , by the click of a button.eg:He clicks the button for the first time an additional text box is added.He clicks the button for the second time , another text box added ....and so on and so forth.
我是一名 php 程序员。我有一个用户输入表单,其中一个人应该能够通过单击按钮添加任意数量的文本框(输入多个电子邮件 ID)。第一次添加附加文本框。他第二次单击按钮,添加了另一个文本框....依此类推。
回答by T.J. Crowder
You can create elements via document.createElement
, and append them to a form via appendChild
, like so:
您可以通过 来创建元素document.createElement
,然后通过将它们附加到表单中appendChild
,如下所示:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById('theForm').appendChild(textbox);
(That assumes the form has an id
= "theForm", but you can get the reference to the form other ways.)
(假设表单有一个id
=“theForm”,但您可以通过其他方式获得对表单的引用。)
If you want to wrap it in a label, that's easy, too:
如果您想将其包装在标签中,那也很简单:
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);
If you kick around the DOM specs (DOM Core 2is the most widely-supported at present, as is the HTML stuffon top of it; DOM Core 3is getting some support now), you'll find other things you can do — like insertinginto the form in the middle rather than appending to the end, etc.
如果你了解 DOM 规范(DOM Core 2是目前最受广泛支持的,它上面的HTML 内容也是如此;DOM Core 3现在得到了一些支持),你会发现你可以做的其他事情——比如在中间插入表单而不是附加到末尾等。
Most of the time, you can use innerHTML
to add to DOM structures (it's supported by every major browser, and is getting standardized as part of HTML5), but there are some browser quirks around form fields, specifically, which is why I've gone with the DOM interface above.
大多数情况下,您可以使用innerHTML
添加到 DOM 结构(每个主要浏览器都支持它,并且正在作为 HTML5 的一部分进行标准化),但是在表单字段周围有一些浏览器怪癖,特别是,这就是我离开的原因与上面的DOM接口。
You haven't said you're using a library, and so the above is pure JavaScript+DOM. It's fairly simple, but in real world use you can quickly run into complications. That's where a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several otherscan save you time, smoothing over browser differences and complications for you, allowing you to focus on what you're actually trying to do.
你没有说你在使用一个库,所以上面是纯 JavaScript+DOM。这相当简单,但在实际使用中,您很快就会遇到复杂情况。这就是 JavaScript 库(如jQuery、Prototype、YUI、Closure或其他几个库中的任何一个)可以节省您的时间,为您平滑浏览器差异和复杂性的地方,让您专注于您实际尝试做的事情。
For instance, in the linked example, I had to provide a hookEvent
function to handle the fact that some browsers use the (standardized) addEventListener
function, while IE prior to IE9 uses attachEvent
instead. And libraries will handle the form field quirks I was talking about, allowing you to specify your fields using straight HTML, like this:
例如,在链接示例中,我必须提供一个hookEvent
函数来处理某些浏览器使用(标准化)addEventListener
函数的事实,而 IE9 之前的 IE 则使用该函数attachEvent
。库将处理我正在谈论的表单字段怪癖,允许您使用直接的 HTML 指定您的字段,如下所示:
Using jQuery:
使用jQuery:
$("#theForm").append("<label>Another email address: <input type='text'>");
Using Prototype:
使用原型:
$("theForm").insert("<br><label>Another email address: <input type='text'>");