jQuery 如何从javascript动态创建文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18326994/
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
How to create text box dynamically from javascript
提问by Mithun Ds
I am trying to create textboxes inside <div id="screens"> </div>. I have a drop down menu for which I select the number of textboxes to be created.
我正在尝试在里面创建文本框<div id="screens"> </div>。我有一个下拉菜单，我可以从中选择要创建的文本框的数量。
The JavaScript code I've written here is not working:
我在这里编写的 JavaScript 代码不起作用：
code:
代码：
function create(param) {
document.getElementById("screens").innerHTML="";
for(var i = 0; i < param; i++) {
alert(i);
document.write('<input type="text" name="Fname">');
}
}
This is adding textboxes by clearing all contents of the current page, but I want the textboxes to be added to <div id="screen"> </div>. How can I do this?
这是通过清除当前页面的所有内容来添加文本框，但我希望将文本框添加到 <div id="screen"> </div>. 我怎样才能做到这一点？
回答by Raúl Juárez
Try something like this:
尝试这样的事情：
function create(param) {
var s= "";
for(var i = 0; i < param; i++) {
s+= '<input type="text" name="Fname">'; //Create one textbox as HTML
}
document.getElementById("screens").innerHTML=s;
}
回答by rink.attendant.6
Since you've tagged jQuery in your question, I'll assuming that you're using jQuery.
由于您在问题中标记了 jQuery，因此我假设您使用的是 jQuery。
function create(param) {
'use strict';
var i;
$("#screens").empty();
for(i = 0; i < param; i += 1) {
$('#screens').append('<input type="text" name="Fname">');
}
}
A pure JavaScript implementation would look like this:
纯 JavaScript 实现如下所示：
function create(param) {
'use strict';
var i, target = document.getElementById('screens');
target.innerHTML = '';
for(i = 0; i < param; i += 1) {
target.innerHTML += '<input type="text" name="Fname">';
}
}
回答by federico-t
function create(param) {
var screens = document.getElementById('screens'),
innerHTML = '',
i;
for (i = 0; i < param; i += 1) {
alert(i);
innerHTML += '<input type="text" name="Fname">';
}
screens.innerHTML = innerHTML;
}
回答by artwl
function create(param) {
var target = document.getElementById('screens'),
oFrag=document.createDocumentFragment();
target.innerHTML = '';
for (var i = 0; i < param; i++) {
var iptNode = document.createElement("input");
iptNode.setAttribute("type", "text");
iptNode.setAttribute("name", "Fname");
oFrag.appendChild(iptNode);
}
target.appendChild(oFrag);
}
回答by Mehandi Hassan
<script>
var newInput4=document.createElement("input");
newInput4.className="form-control ";
newInput4.name="totalunit"+instance;
newInput4.placeholder="Unit";
newInput4.type="text";
</script>
